/* mesh.css — chat.mesh.eco wears mesh, not Element.
 *
 * FOUNDER, 17.09.2026: "CAN YOU PLEASE ALSO ENSURE THAT THE WHOLE https://chat.mesh.eco/ IS
 * BRANDED IN THE SAME WAY?"
 *
 * ⛔ WHY config.json's `custom_themes` IS NOT ENOUGH. Element 1.12 renders through Compound design
 * tokens (`--cpd-color-*`, body class `cpd-theme-light`). The old custom-theme colour map still
 * parses and still does nothing to those tokens, so an app configured with a mesh theme came up
 * white with a black button and Element's green accent. The theme block stays — it colours the
 * older surfaces — but the app is dressed HERE.
 *
 * THE METHOD: remap the two PALETTE SCALES rather than chase surfaces. Compound's semantic tokens
 * are built on `gray` (cool blue-grey) and `green` (Element's accent). Warm the grey into mesh's
 * cream and turn the green into mesh's gold, and every surface that never got named follows —
 * which is the same reason the homeserver's pages are dressed at `_base.html` and not one by one.
 * The handful of semantic tokens below are the ones Compound hardcodes rather than deriving.
 *
 * `!important` is deliberate: Element injects its stylesheets from JS bundles after this file, so
 * an ordinary declaration loses on load order through no fault of its own.
 */

:root, .cpd-theme-light {
  /* Element's cool grey → mesh's warm neutrals (mesh.app: #f4f1ec canvas, #fffdfa card, #2a2622 ink) */
  --cpd-color-gray-100:  #fffdfa !important;
  --cpd-color-gray-200:  #faf7f2 !important;
  --cpd-color-gray-300:  #f4f1ec !important;
  --cpd-color-gray-400:  #e9e3d9 !important;
  --cpd-color-gray-500:  #ddd5c8 !important;
  --cpd-color-gray-600:  #cfc6b8 !important;
  --cpd-color-gray-700:  #b8aea0 !important;
  --cpd-color-gray-800:  #968c80 !important;
  --cpd-color-gray-900:  #6b625a !important;
  --cpd-color-gray-1000: #5d554e !important;
  --cpd-color-gray-1100: #4e4741 !important;
  --cpd-color-gray-1200: #3d3833 !important;
  --cpd-color-gray-1300: #332e29 !important;
  --cpd-color-gray-1400: #2a2622 !important;

  /* Element's green accent → mesh gold (#8a6d2f) */
  --cpd-color-green-100:  #fdfaf3 !important;
  --cpd-color-green-200:  #faf5e9 !important;
  --cpd-color-green-300:  #f4ecd9 !important;
  --cpd-color-green-400:  #e9dcba !important;
  --cpd-color-green-500:  #dbc794 !important;
  --cpd-color-green-600:  #cdb376 !important;
  --cpd-color-green-700:  #b8964a !important;
  --cpd-color-green-800:  #9d7c38 !important;
  --cpd-color-green-900:  #8a6d2f !important;
  --cpd-color-green-1000: #7a6029 !important;
  --cpd-color-green-1100: #6a5323 !important;
  --cpd-color-green-1200: #55421c !important;
  --cpd-color-green-1300: #3d2f14 !important;
  --cpd-color-green-1400: #2a200e !important;

  /* the surfaces Compound names outright */
  --cpd-color-bg-canvas-default:         #fffdfa !important;
  --cpd-color-bg-canvas-default-level-1: #fffdfa !important;
  --cpd-color-bg-canvas-disabled:        #f2efe9 !important;
  --cpd-color-bg-subtle-primary:         #e9e3d9 !important;
  --cpd-color-bg-subtle-secondary:       #f4f1ec !important;
  --cpd-color-bg-subtle-secondary-level-0: #f4f1ec !important;
  --cpd-color-text-primary:              #2a2622 !important;
  --cpd-color-text-secondary:            #6b625a !important;
  --cpd-color-icon-primary:              #2a2622 !important;
  --cpd-color-icon-secondary:            #6b625a !important;
  --cpd-color-border-interactive-primary:   #c9c1b7 !important;
  --cpd-color-border-interactive-secondary: #e2dcd4 !important;
  --cpd-color-border-interactive-hovered:   #8a6d2f !important;

  /* the primary button is mesh GOLD, as it is on mesh.app — Compound's is near-black */
  --cpd-color-bg-action-primary-rest:     #8a6d2f !important;
  --cpd-color-bg-action-primary-hovered:  #9a7b38 !important;
  --cpd-color-bg-action-primary-pressed:  #755c28 !important;
  --cpd-color-bg-action-primary-disabled: #cfc6b8 !important;
  --cpd-color-text-on-solid-primary:      #ffffff !important;

  --cpd-color-bg-accent-rest:     #8a6d2f !important;
  --cpd-color-bg-accent-hovered:  #7a6029 !important;
  --cpd-color-bg-accent-pressed:  #6a5323 !important;
  --cpd-color-bg-accent-selected: rgba(138,109,47,.11) !important;
  --cpd-color-text-action-accent: #8a6d2f !important;
  --cpd-color-text-link-external: #8a6d2f !important;
}

.cpd-theme-dark {
  --cpd-color-gray-100:  #1b1815 !important;
  --cpd-color-gray-200:  #211d19 !important;
  --cpd-color-gray-300:  #232019 !important;
  --cpd-color-gray-400:  #2b2620 !important;
  --cpd-color-gray-500:  #3a352f !important;
  --cpd-color-gray-600:  #45403a !important;
  --cpd-color-gray-700:  #57514a !important;
  --cpd-color-gray-800:  #776f66 !important;
  --cpd-color-gray-900:  #a79e94 !important;
  --cpd-color-gray-1000: #bab1a7 !important;
  --cpd-color-gray-1100: #c8bfb5 !important;
  --cpd-color-gray-1200: #d8d0c7 !important;
  --cpd-color-gray-1300: #e3dcd4 !important;
  --cpd-color-gray-1400: #ece7e0 !important;

  --cpd-color-green-900:  #c8a457 !important;
  --cpd-color-green-800:  #b8944a !important;
  --cpd-color-green-1000: #d4b36b !important;

  --cpd-color-bg-canvas-default:         #232019 !important;
  --cpd-color-bg-canvas-default-level-1: #232019 !important;
  --cpd-color-bg-subtle-primary:         #2b2620 !important;
  --cpd-color-bg-subtle-secondary:       #1b1815 !important;
  --cpd-color-text-primary:              #ece7e0 !important;
  --cpd-color-text-secondary:            #a79e94 !important;
  --cpd-color-icon-primary:              #ece7e0 !important;
  --cpd-color-icon-secondary:            #a79e94 !important;
  --cpd-color-border-interactive-primary:   #57514a !important;
  --cpd-color-border-interactive-secondary: #3a352f !important;

  --cpd-color-bg-action-primary-rest:     #c8a457 !important;
  --cpd-color-bg-action-primary-hovered:  #d4b36b !important;
  --cpd-color-bg-action-primary-pressed:  #b8944a !important;
  --cpd-color-text-on-solid-primary:      #1b1815 !important;
  --cpd-color-bg-accent-rest:             #c8a457 !important;
  --cpd-color-text-action-accent:         #c8a457 !important;
}

/* The sign-in page sits on the canvas; mesh puts its cream behind the card, as mesh.app does. */
body { background-color: #f4f1ec !important; }
.cpd-theme-dark body, body.cpd-theme-dark { background-color: #1b1815 !important; }

/* ── the two pieces of chrome that are not tokens ─────────────────────────────────────────────
 * Compound's "glass" layer — the halo around the sign-in card — is a BLUE tint
 * (rgba(5,46,97,.12)) applied by a hashed class, and the auth footer paints a dark gradient made
 * for a photographic background mesh does not use. Neither reads a design token, so neither
 * followed the palette. The glass is matched on a class SUBSTRING because its hash changes
 * between Element builds; the tint is what is stable, not the name.
 */
[class*="_glass_"] { background: rgba(138, 109, 47, .10) !important; }
.mx_AuthFooter { background-image: none !important; }
.mx_AuthFooter, .mx_AuthFooter a { color: #6b625a !important; text-shadow: none !important; }
.mx_AuthFooter a:hover { color: #8a6d2f !important; }

.cpd-theme-dark [class*="_glass_"] { background: rgba(200, 164, 87, .10) !important; }
.cpd-theme-dark .mx_AuthFooter, .cpd-theme-dark .mx_AuthFooter a { color: #a79e94 !important; }

/* ── the alpha accent scale ────────────────────────────────────────────────────────────────────
 * Compound keeps a second green scale (`alpha-green`) for translucent accent surfaces, and it is
 * the brand accent just as much as the solid one — it was still Element green after the first
 * pass. Remapped to gold with it.
 *
 * ⚠ AND DELIBERATELY NOT REMAPPED: the info (blue), critical (red) and success semantics. Those
 * colours are MEANING, not brand — a red that has been warmed into gold no longer says "this went
 * wrong". mesh takes the accent; it leaves the signals alone.
 */
:root, .cpd-theme-light {
  --cpd-color-alpha-green-900:  #8a6d2f !important;
  --cpd-color-alpha-green-1000: #7a6029 !important;
  --cpd-color-alpha-green-1100: #6a5323 !important;
  --cpd-color-alpha-green-1200: #55421c !important;
  --cpd-color-alpha-green-1300: #3d2f14 !important;
  --cpd-color-alpha-green-1400: #2a200e !important;
  --cpd-color-alpha-green-300:  #f4ecd9 !important;
  --cpd-color-alpha-green-400:  #e9dcba !important;
  --cpd-color-alpha-green-500:  #dbc794 !important;
}
.cpd-theme-dark {
  --cpd-color-alpha-green-900:  #c8a457 !important;
  --cpd-color-alpha-green-1000: #d4b36b !important;
  --cpd-color-alpha-green-800:  #b8944a !important;
}

/* ── the typefaces mesh.app uses ───────────────────────────────────────────────────────────────
 * Inter for text, Lato 900 for the heavy display weight — the exact @font-face set mesh.app
 * declares.
 *
 * ⛔ SERVED FROM THIS ORIGIN, NOT assets.mesh.eco. Element ships a Content-Security-Policy of
 * `font-src 'self' data:`, so every cross-origin font was BLOCKED and the app quietly fell back to
 * the system face — the console said so three times and the page looked almost right, which is the
 * worst way for a thing to be broken. Copying the four woff2 files here satisfies the policy as it
 * stands; widening a CSP to load a font is a bad trade.
 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/themes/mesh/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/themes/mesh/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/themes/mesh/fonts/lato-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/themes/mesh/fonts/lato-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, .cpd-theme-light, .cpd-theme-dark {
  --cpd-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
html, body, button, input, textarea, select,
.mx_MatrixChat, .mx_AuthPage, .mx_RoomView, .mx_EventTile, .mx_RoomList {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}