/* muzulmanska: skin tokens.
   Layer 1 = modules/brand/tokens/muzulmanska.css colour values, copied verbatim (--brand-*, --color-*; frontend main.css maps them to --c-*).
   Layer 2 = design extension: fonts, atmosphere, glass material, shadow tint. Load AFTER system.css:
     <link rel="stylesheet" href="/brand/muzulmanska/tokens.css">  (this file)  +  system.css
   Light is :root; dark follows prefers-color-scheme unless [data-theme="light"]; [data-theme="dark"] forces dark. */
:root {
  --font-display: 'Josefin Sans', system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-body: 'Noto Sans', system-ui, sans-serif;
  --font-ui: var(--font-body);
  --display-weight: 600;
  --display-tracking: -0.005em;
  --display-scale: 1;
  --font-arabic: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
}
:root {
  --brand-primary: #0f5e4b;
  --brand-accent: #e3c58c;
  --color-primary: #0f5e4b;
  --color-on-primary: #ffffff;
  --color-accent: #e3c58c;
  --color-on-accent: #0f3a2f;
  --color-accent-text: #775618;
  --color-surface: #f8f6ef;
  --color-surface-2: #ece8da;
  --color-text: #14211d;
  --color-muted: #505f59;
  --color-success: #1f6b3a;
  --color-danger: #a62323;
  --color-border: #d6d1bd;
  color-scheme: light;
  --atmosphere: radial-gradient(64% 44% at 100% 0%, rgba(15,94,75,.22), transparent 72%), radial-gradient(56% 36% at 0% 100%, rgba(227,197,140,.45), transparent 72%), linear-gradient(180deg,#f7f4ea 0%,#edeee0 100%);
  --halo: 15,94,75;
  --motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'84'%20height%3D'84'%20viewBox%3D'0%200%2084%2084'%20fill%3D'none'%20stroke%3D'%230f5e4b'%20stroke-opacity%3D'0.1'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M14%2014H70V70H14Z'%2F%3E%3Cpath%20d%3D'M42%204%2080%2042%2042%2080%204%2042Z'%2F%3E%3Ccircle%20cx%3D'42'%20cy%3D'42'%20r%3D'9'%2F%3E%3C%2Fsvg%3E");
  --shadow-rgb: 10 50 40;
  --glass-fill: rgba(248,246,239,0.74);
  --glass-fill-thick: rgba(248,246,239,0.88);
  --glass-stroke: rgba(255,255,255,0.55);
  --glass-edge: rgba(255,255,255,0.65);
  --glass-solid: #f8f6ef;
  --scrim: rgba(20,24,40,.32);
  --grain-opacity: .05;
  --cta-bg: var(--color-primary);
  --cta-fg: var(--color-on-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #5cc2a4;
    --color-on-primary: #0b1714;
    --color-accent: #e3c58c;
    --color-on-accent: #0b1714;
    --color-accent-text: #e3c58c;
    --color-surface: #0b1714;
    --color-surface-2: #12241f;
    --color-text: #e8efe9;
    --color-muted: #9db3aa;
    --color-success: #6cc58a;
    --color-danger: #f08a8a;
    --color-border: #22403a;
    color-scheme: dark;
    --atmosphere: radial-gradient(66% 48% at 88% -6%, rgba(92,194,164,.26), transparent 72%), radial-gradient(60% 40% at 0% 104%, rgba(227,197,140,.14), transparent 72%), linear-gradient(180deg,#07110e 0%,#0d1b17 100%);
    --halo: 92,194,164;
    --motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'84'%20height%3D'84'%20viewBox%3D'0%200%2084%2084'%20fill%3D'none'%20stroke%3D'%23e3c58c'%20stroke-opacity%3D'0.08'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M14%2014H70V70H14Z'%2F%3E%3Cpath%20d%3D'M42%204%2080%2042%2042%2080%204%2042Z'%2F%3E%3Ccircle%20cx%3D'42'%20cy%3D'42'%20r%3D'9'%2F%3E%3C%2Fsvg%3E");
    --shadow-rgb: 0 6 4;
    --glass-fill: rgba(16,32,27,0.62);
    --glass-fill-thick: rgba(16,32,27,0.84);
    --glass-stroke: rgba(255,255,255,0.1);
    --glass-edge: rgba(255,255,255,0.14);
    --glass-solid: #10201b;
    --scrim: rgba(0,0,0,.55);
    --grain-opacity: .07;
    --cta-bg: var(--color-primary);
    --cta-fg: var(--color-on-primary);
  }
}
:root[data-theme="dark"] {
  --color-primary: #5cc2a4;
  --color-on-primary: #0b1714;
  --color-accent: #e3c58c;
  --color-on-accent: #0b1714;
  --color-accent-text: #e3c58c;
  --color-surface: #0b1714;
  --color-surface-2: #12241f;
  --color-text: #e8efe9;
  --color-muted: #9db3aa;
  --color-success: #6cc58a;
  --color-danger: #f08a8a;
  --color-border: #22403a;
  color-scheme: dark;
  --atmosphere: radial-gradient(66% 48% at 88% -6%, rgba(92,194,164,.26), transparent 72%), radial-gradient(60% 40% at 0% 104%, rgba(227,197,140,.14), transparent 72%), linear-gradient(180deg,#07110e 0%,#0d1b17 100%);
  --halo: 92,194,164;
  --motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'84'%20height%3D'84'%20viewBox%3D'0%200%2084%2084'%20fill%3D'none'%20stroke%3D'%23e3c58c'%20stroke-opacity%3D'0.08'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M14%2014H70V70H14Z'%2F%3E%3Cpath%20d%3D'M42%204%2080%2042%2042%2080%204%2042Z'%2F%3E%3Ccircle%20cx%3D'42'%20cy%3D'42'%20r%3D'9'%2F%3E%3C%2Fsvg%3E");
  --shadow-rgb: 0 6 4;
  --glass-fill: rgba(16,32,27,0.62);
  --glass-fill-thick: rgba(16,32,27,0.84);
  --glass-stroke: rgba(255,255,255,0.1);
  --glass-edge: rgba(255,255,255,0.14);
  --glass-solid: #10201b;
  --scrim: rgba(0,0,0,.55);
  --grain-opacity: .07;
  --cta-bg: var(--color-primary);
  --cta-fg: var(--color-on-primary);
}