/* ==========================================================================
   Palette Exploration — iterations/palette.css
   Loaded LAST (after css/refine.css) by index.html (live app) and by
   iterations/palette_exploration.html (review page). With
   <body data-palette="baseline"> or no attribute-value match, every rule
   below is inert and the shipped CSS renders exactly as before.

   How it works
   ------------
   - Direction lives on <body data-palette="teal|emerald|lapis|saffron|burgundy">
     (or "baseline" = the shipped CSS, untouched, defect included).
   - Mode lives on <html data-resolved-theme="light|dark"> — the RESOLVED mode,
     not data-theme (app.js removes data-theme in "auto" mode and lets a media
     query resolve dark, which would break light-mode selectors). The boot
     script in index.html and scheme.js keep data-resolved-theme in sync with
     app.js's resolution; the exploration page sets it directly.
   - Every direction overrides the full token superset: the variables.css
     tokens PLUS the refine.css tokens (--color-primary, --color-accent,
     --bg-primary/secondary, --border-medium, --text-muted).

   New token introduced (bug fix): --btn-bg / --btn-bg-hover
   The shipped dark mode fails WCAG on primary buttons — white on
   --teal-600 #56A09A is 3.05:1 — because --teal-600 must be light for
   text/icons but dark enough for white button text. Splitting the two
   roles fixes it. Verified: node iterations/palette_contrast_check.mjs
   (all five directions pass every critical pair in both modes).
   ========================================================================== */

/* ---------- 0. Shared: button split + legacy-alias fills (every direction) ---------- */

body:not([data-palette="baseline"]) {
  --ink-dark: var(--text-primary);   /* verification-quote text (was undefined) */
  --bg: var(--bg-card);              /* verification-quote bg   (was undefined) */
  --font-serif: Georgia, "Times New Roman", serif;
}

body:not([data-palette="baseline"]) .btn-primary {
  background: var(--btn-bg, var(--teal-600));
}
body:not([data-palette="baseline"]) .btn-primary:hover {
  background: var(--btn-bg-hover, var(--teal-700));
}

/* ==========================================================================
   DIRECTION A — DUSK TEAL (refined evolution of the current identity)
   One hue family end-to-end: warm paper + dusky teal + one antique gold.
   Dark mode moves from the current navy (#0F111A) to deep teal ink, so
   light and dark finally speak the same color language.
   ========================================================================== */

html[data-resolved-theme="light"] body[data-palette="teal"] {
  --bg-page: #FAF9F6;  --bg-card: #FFFFFF;  --bg-subtle: #F4F2EC;  --bg-hover: #EDEBE3;

  --text-primary: #1B1A17;  --text-secondary: #3C3A35;
  --text-tertiary: #6A675F; --text-quaternary: #97938A;

  --border-subtle: #E7E4DC;  --border-default: #D6D2C8;
  --border-strong: #B9B4A9;  --border-light: rgba(30, 77, 74, 0.12);

  --shadow-color-sm: rgba(22, 59, 57, 0.05);  --shadow-color-md: rgba(22, 59, 57, 0.08);
  --shadow-color-lg: rgba(22, 59, 57, 0.12);  --shadow-color-xl: rgba(22, 59, 57, 0.16);

  --teal-50: #F0F7F6;  --teal-100: #D9EAE7;  --teal-200: #B2D8D2;  --teal-300: #88BFBA;
  --teal-400: #5FA49D; --teal-500: #3D837C;  --teal-600: #2C6662;  --teal-700: #1E4D4A;
  --teal-800: #163B39; --teal-900: #0F2A28;

  --gold-50: #FAF6EC;  --gold-100: #F4EBD6;  --gold-200: #E8D9AE;  --gold-300: #D9C489;
  --gold-400: #C6A962; --gold-500: #B18F4E;  --gold-600: #93743F;  --gold-700: #6F5730;
  --gold: #C6A962;  --gold-dark: #8A6C3B;  --gold-light: #E6D5A2;  --gold-softest: #FAF6EC;

  --color-arabic-card: var(--teal-700);
  --color-section-title: var(--teal-700);
  --bg-proof-block: var(--teal-50);

  --color-primary: #1E4D4A;  --color-primary-rgb: 30, 77, 74;
  --color-accent: #8A6C3B;
  --border-medium: #E5E1D6;  --text-muted: #6A675F;
  --btn-bg: #2C6662;  --btn-bg-hover: #1E4D4A;
}

html[data-resolved-theme="light"] body[data-palette="teal"] .v1-hero {
  background: linear-gradient(145deg, var(--teal-700) 0%, var(--teal-800) 60%, var(--teal-900) 100%);
  border: 1px solid rgba(198, 169, 98, 0.28);
}
html[data-resolved-theme="light"] body[data-palette="teal"] .v1-hero::before {
  background: radial-gradient(circle at 85% 20%, rgba(198, 169, 98, 0.16), transparent 55%);
}

html[data-resolved-theme="dark"] body[data-palette="teal"] {
  --bg-page: #0E1B1A;  --bg-card: #142523;  --bg-subtle: #0A1514;  --bg-hover: #1A2E2B;
  --bg-primary: #0E1B1A;  --bg-secondary: #0A1514;

  --text-primary: #EEECE5;  --text-secondary: #C9C6BE;
  --text-tertiary: #98958C; --text-quaternary: #6E6B62;

  --border-subtle: rgba(255,255,255,0.09);  --border-default: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);  --border-light: rgba(255,255,255,0.07);

  --shadow-color-sm: rgba(0,0,0,0.18);  --shadow-color-md: rgba(0,0,0,0.28);
  --shadow-color-lg: rgba(0,0,0,0.40);  --shadow-color-xl: rgba(0,0,0,0.52);

  --teal-50: rgba(127, 186, 179, 0.08);  --teal-100: rgba(127, 186, 179, 0.14);
  --teal-400: #7FBAB3;  --teal-500: #7FBAB3;  --teal-600: #6BABA3;  --teal-700: #4E928A;

  --gold-50: rgba(217, 196, 137, 0.08);  --gold-100: rgba(217, 196, 137, 0.14);
  --gold-300: #D9C489;  --gold-400: #CBB078;
  --gold: #CBB078;  --gold-dark: #D9C489;  --gold-light: rgba(217, 196, 137, 0.22);

  --color-arabic-card: var(--gold-300);
  --color-section-title: var(--teal-500);
  --bg-proof-block: rgba(255,255,255,0.05);

  --color-primary: #7FBAB3;  --color-primary-rgb: 127, 186, 179;
  --color-accent: #D9C489;
  --border-medium: #223734;  --text-muted: #98958C;
  --btn-bg: #245854;  --btn-bg-hover: #1E4D4A;

  --hero-input-bg: #10201E;
}

html[data-resolved-theme="dark"] body[data-palette="teal"] .v1-hero,
html[data-resolved-theme="dark"] body[data-palette="teal"] .bento-hero-name {
  background: linear-gradient(145deg, #0C2321 0%, #12403C 60%, #17514C 100%);
}
html[data-resolved-theme="dark"] body[data-palette="teal"] .v1-search-input-wrap {
  background: var(--hero-input-bg);
}

/* ==========================================================================
   DIRECTION B — EMERALD & GOLD (Prophetic green)
   The green of the Prophet's ﷺ banner and the Madinah dome, with the same
   antique gold as A. Dark mode is deep forest, not navy.
   ========================================================================== */

html[data-resolved-theme="light"] body[data-palette="emerald"] {
  --bg-page: #FAFAF7;  --bg-card: #FFFFFF;  --bg-subtle: #F1F4EE;  --bg-hover: #E9EEE6;

  --text-primary: #171B18;  --text-secondary: #36403A;
  --text-tertiary: #636D66; --text-quaternary: #929B93;

  --border-subtle: #E4E8DE;  --border-default: #D3D9CC;
  --border-strong: #B6BEAE;  --border-light: rgba(21, 84, 64, 0.12);

  --shadow-color-sm: rgba(16, 65, 50, 0.05);  --shadow-color-md: rgba(16, 65, 50, 0.08);
  --shadow-color-lg: rgba(16, 65, 50, 0.12);  --shadow-color-xl: rgba(16, 65, 50, 0.16);

  --teal-50: #EDF6F0;  --teal-100: #CDEADD;  --teal-200: #9FD8BE;  --teal-300: #6FC09C;
  --teal-400: #47A67E; --teal-500: #2C8A64;  --teal-600: #1F6E4F;  --teal-700: #155440;
  --teal-800: #104132; --teal-900: #0A2B21;

  --gold-50: #FAF6EC;  --gold-100: #F4EBD6;  --gold-200: #E8D9AE;  --gold-300: #D9C489;
  --gold-400: #C6A962; --gold-500: #B18F4E;  --gold-600: #93743F;  --gold-700: #6F5730;
  --gold: #C6A962;  --gold-dark: #8A6C3B;  --gold-light: #E6D5A2;  --gold-softest: #FAF6EC;

  --color-arabic-card: var(--teal-700);
  --color-section-title: var(--teal-700);
  --bg-proof-block: var(--teal-50);

  --color-primary: #155440;  --color-primary-rgb: 21, 84, 64;
  --color-accent: #8A6C3B;
  --border-medium: #E1E5DA;  --text-muted: #636D66;
  --btn-bg: #1F6E4F;  --btn-bg-hover: #155440;
}

html[data-resolved-theme="light"] body[data-palette="emerald"] .v1-hero {
  background: linear-gradient(145deg, var(--teal-700) 0%, var(--teal-800) 60%, var(--teal-900) 100%);
  border: 1px solid rgba(198, 169, 98, 0.28);
}
html[data-resolved-theme="light"] body[data-palette="emerald"] .v1-hero::before {
  background: radial-gradient(circle at 85% 20%, rgba(198, 169, 98, 0.16), transparent 55%);
}

html[data-resolved-theme="dark"] body[data-palette="emerald"] {
  --bg-page: #0B1511;  --bg-card: #112019;  --bg-subtle: #081009;  --bg-hover: #16271E;
  --bg-primary: #0B1511;  --bg-secondary: #081009;

  --text-primary: #ECEFEA;  --text-secondary: #C5CCC5;
  --text-tertiary: #949B94; --text-quaternary: #6A716A;

  --border-subtle: rgba(255,255,255,0.09);  --border-default: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);  --border-light: rgba(255,255,255,0.07);

  --shadow-color-sm: rgba(0,0,0,0.18);  --shadow-color-md: rgba(0,0,0,0.28);
  --shadow-color-lg: rgba(0,0,0,0.40);  --shadow-color-xl: rgba(0,0,0,0.52);

  --teal-50: rgba(127, 203, 166, 0.08);  --teal-100: rgba(127, 203, 166, 0.14);
  --teal-400: #7FCBA6;  --teal-500: #74C39D;  --teal-600: #60B18C;  --teal-700: #489673;

  --gold-50: rgba(217, 196, 137, 0.08);  --gold-100: rgba(217, 196, 137, 0.14);
  --gold-300: #D9C489;  --gold-400: #CBB078;
  --gold: #CBB078;  --gold-dark: #D9C489;  --gold-light: rgba(217, 196, 137, 0.22);

  --color-arabic-card: var(--gold-300);
  --color-section-title: var(--teal-500);
  --bg-proof-block: rgba(255,255,255,0.05);

  --color-primary: #74C39D;  --color-primary-rgb: 116, 195, 157;
  --color-accent: #D9C489;
  --border-medium: #1E3329;  --text-muted: #949B94;
  --btn-bg: #1A5E43;  --btn-bg-hover: #155440;

  --hero-input-bg: #0C1B14;
}

html[data-resolved-theme="dark"] body[data-palette="emerald"] .v1-hero,
html[data-resolved-theme="dark"] body[data-palette="emerald"] .bento-hero-name {
  background: linear-gradient(145deg, #082018 0%, #0E3A2A 60%, #125037 100%);
}
html[data-resolved-theme="dark"] body[data-palette="emerald"] .v1-search-input-wrap {
  background: var(--hero-input-bg);
}

/* ==========================================================================
   DIRECTION C — LAPIS & GOLD (manuscript illumination)
   The tazhib pairing: lapis ultramarine + gold on ivory. Keeps the current
   app's navy dark mode but makes it intentional — midnight ink, lapis accents.
   ========================================================================== */

html[data-resolved-theme="light"] body[data-palette="lapis"] {
  --bg-page: #FAF9F6;  --bg-card: #FFFFFF;  --bg-subtle: #F2F2ED;  --bg-hover: #EBEAE2;

  --text-primary: #191B21;  --text-secondary: #383B47;
  --text-tertiary: #66697A; --text-quaternary: #9295A4;

  --border-subtle: #E6E6E0;  --border-default: #D5D5CD;
  --border-strong: #B8B8B0;  --border-light: rgba(42, 58, 111, 0.12);

  --shadow-color-sm: rgba(31, 44, 85, 0.05);  --shadow-color-md: rgba(31, 44, 85, 0.08);
  --shadow-color-lg: rgba(31, 44, 85, 0.12);  --shadow-color-xl: rgba(31, 44, 85, 0.16);

  --teal-50: #EFF1F9;  --teal-100: #D8DDF0;  --teal-200: #B2BCE3;  --teal-300: #8A99D5;
  --teal-400: #6578C4; --teal-500: #485DAE;  --teal-600: #36488D;  --teal-700: #2A3A6F;
  --teal-800: #1F2C55; --teal-900: #161F3D;

  --gold-50: #FAF6EC;  --gold-100: #F4ECD8;  --gold-200: #E7DBB2;  --gold-300: #D5BC85;
  --gold-400: #C2A45E; --gold-500: #AC8C4B;  --gold-600: #8E7140;  --gold-700: #6A5430;
  --gold: #C2A45E;  --gold-dark: #85683A;  --gold-light: #E3D2A4;  --gold-softest: #FAF6EC;

  --color-arabic-card: var(--teal-700);
  --color-section-title: var(--teal-700);
  --bg-proof-block: var(--teal-50);

  --color-primary: #2A3A6F;  --color-primary-rgb: 42, 58, 111;
  --color-accent: #85683A;
  --border-medium: #E3E2DB;  --text-muted: #66697A;
  --btn-bg: #36488D;  --btn-bg-hover: #2A3A6F;
}

html[data-resolved-theme="light"] body[data-palette="lapis"] .v1-hero {
  background: linear-gradient(145deg, var(--teal-700) 0%, var(--teal-800) 60%, var(--teal-900) 100%);
  border: 1px solid rgba(194, 164, 94, 0.28);
}
html[data-resolved-theme="light"] body[data-palette="lapis"] .v1-hero::before {
  background: radial-gradient(circle at 85% 20%, rgba(194, 164, 94, 0.16), transparent 55%);
}

html[data-resolved-theme="dark"] body[data-palette="lapis"] {
  --bg-page: #0E1220;  --bg-card: #151B2C;  --bg-subtle: #0A0D18;  --bg-hover: #1B2236;
  --bg-primary: #0E1220;  --bg-secondary: #0A0D18;

  --text-primary: #EDEDF3;  --text-secondary: #C7C9D4;
  --text-tertiary: #9699A7; --text-quaternary: #6C6F7D;

  --border-subtle: rgba(255,255,255,0.09);  --border-default: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);  --border-light: rgba(255,255,255,0.07);

  --shadow-color-sm: rgba(0,0,0,0.18);  --shadow-color-md: rgba(0,0,0,0.28);
  --shadow-color-lg: rgba(0,0,0,0.40);  --shadow-color-xl: rgba(0,0,0,0.52);

  --teal-50: rgba(131, 153, 212, 0.08);  --teal-100: rgba(131, 153, 212, 0.14);
  --teal-400: #8FA2DC;  --teal-500: #8399D4;  --teal-600: #7D92CB;  --teal-700: #566BB0;

  --gold-50: rgba(213, 188, 133, 0.08);  --gold-100: rgba(213, 188, 133, 0.14);
  --gold-300: #D5BC85;  --gold-400: #CBB379;
  --gold: #CBB379;  --gold-dark: #D5BC85;  --gold-light: rgba(213, 188, 133, 0.22);

  --color-arabic-card: var(--gold-300);
  --color-section-title: var(--teal-500);
  --bg-proof-block: rgba(255,255,255,0.05);

  --color-primary: #8399D4;  --color-primary-rgb: 131, 153, 212;
  --color-accent: #D5BC85;
  --border-medium: #20273D;  --text-muted: #9699A7;
  --btn-bg: #2E3D77;  --btn-bg-hover: #2A3A6F;

  --hero-input-bg: #111832;
}

html[data-resolved-theme="dark"] body[data-palette="lapis"] .v1-hero,
html[data-resolved-theme="dark"] body[data-palette="lapis"] .bento-hero-name {
  background: linear-gradient(145deg, #0D1631 0%, #15234E 60%, #1D3268 100%);
}
html[data-resolved-theme="dark"] body[data-palette="lapis"] .v1-search-input-wrap {
  background: var(--hero-input-bg);
}

/* ==========================================================================
   DIRECTION D — WARM INK & SAFFRON (single-accent minimal)
   The most minimal: warm ink neutrals + ONE accent (saffron-gold) doing all
   interactive work. Tests how far "low clutter" can go — no second hue.
   The --teal-* ramp is remapped to saffron so components pick it up
   untouched.
   ========================================================================== */

html[data-resolved-theme="light"] body[data-palette="saffron"] {
  --bg-page: #FBF9F5;  --bg-card: #FFFFFF;  --bg-subtle: #F4F1E9;  --bg-hover: #EDE9DF;

  --text-primary: #201E19;  --text-secondary: #43403A;
  --text-tertiary: #716D64; --text-quaternary: #9D988C;

  --border-subtle: #E8E4D9;  --border-default: #D7D2C5;
  --border-strong: #BAB4A4;  --border-light: rgba(106, 80, 38, 0.12);

  --shadow-color-sm: rgba(51, 38, 19, 0.05);  --shadow-color-md: rgba(51, 38, 19, 0.08);
  --shadow-color-lg: rgba(51, 38, 19, 0.12);  --shadow-color-xl: rgba(51, 38, 19, 0.16);

  --teal-50: #FAF4E5;  --teal-100: #F3E8CB;  --teal-200: #E7D197;  --teal-300: #D8B668;
  --teal-400: #C69E4B; --teal-500: #AC843C;  --teal-600: #8D6A31;  --teal-700: #6A5026;
  --teal-800: #4C3A1D; --teal-900: #332613;

  --gold-50: #FAF4E5;  --gold-100: #F3E8CB;  --gold-200: #E7D197;  --gold-300: #D8B668;
  --gold-400: #C69E4B; --gold-500: #AC843C;  --gold-600: #8D6A31;  --gold-700: #6A5026;
  --gold: #C69E4B;  --gold-dark: #8D6A31;  --gold-light: #E7D197;  --gold-softest: #FAF4E5;

  --color-arabic-card: var(--teal-700);
  --color-section-title: var(--teal-700);
  --bg-proof-block: var(--teal-50);

  --color-primary: #6A5026;  --color-primary-rgb: 106, 80, 38;
  --color-accent: #8D6A31;
  --border-medium: #E7E2D6;  --text-muted: #716D64;
  --btn-bg: #6A5026;  --btn-bg-hover: #57411F;
}

html[data-resolved-theme="light"] body[data-palette="saffron"] .v1-hero {
  background: linear-gradient(145deg, var(--teal-800) 0%, var(--teal-800) 55%, var(--teal-900) 100%);
  border: 1px solid rgba(198, 158, 75, 0.28);
}
html[data-resolved-theme="light"] body[data-palette="saffron"] .v1-hero::before {
  background: radial-gradient(circle at 85% 20%, rgba(198, 158, 75, 0.18), transparent 55%);
}

html[data-resolved-theme="dark"] body[data-palette="saffron"] {
  --bg-page: #141210;  --bg-card: #1C1915;  --bg-subtle: #0F0D0B;  --bg-hover: #242019;
  --bg-primary: #141210;  --bg-secondary: #0F0D0B;

  --text-primary: #F0EDE5;  --text-secondary: #CCC8BD;
  --text-tertiary: #9C978A; --text-quaternary: #716C5F;

  --border-subtle: rgba(255,255,255,0.09);  --border-default: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);  --border-light: rgba(255,255,255,0.07);

  --shadow-color-sm: rgba(0,0,0,0.18);  --shadow-color-md: rgba(0,0,0,0.28);
  --shadow-color-lg: rgba(0,0,0,0.40);  --shadow-color-xl: rgba(0,0,0,0.52);

  --teal-50: rgba(216, 182, 104, 0.08);  --teal-100: rgba(216, 182, 104, 0.14);
  --teal-400: #DDB96E;  --teal-500: #D8B668;  --teal-600: #D0AC5C;  --teal-700: #B98F45;

  --gold-50: rgba(216, 182, 104, 0.08);  --gold-100: rgba(216, 182, 104, 0.14);
  --gold-300: #D8B668;  --gold-400: #D8B668;
  --gold: #D8B668;  --gold-dark: #D8B668;  --gold-light: rgba(216, 182, 104, 0.22);

  --color-arabic-card: var(--gold-300);
  --color-section-title: var(--gold-300);
  --bg-proof-block: rgba(255,255,255,0.05);

  --color-primary: #D8B668;  --color-primary-rgb: 216, 182, 104;
  --color-accent: #D8B668;
  --border-medium: #2A251C;  --text-muted: #9C978A;
  --btn-bg: #8D6A31;  --btn-bg-hover: #7A5B2A;

  --hero-input-bg: #1E1913;
}

html[data-resolved-theme="dark"] body[data-palette="saffron"] .v1-hero,
html[data-resolved-theme="dark"] body[data-palette="saffron"] .bento-hero-name {
  background: linear-gradient(145deg, #1A1510 0%, #2E2415 60%, #3D2F19 100%);
}
html[data-resolved-theme="dark"] body[data-palette="saffron"] .v1-search-input-wrap {
  background: var(--hero-input-bg);
}

/* ==========================================================================
   DIRECTION E — BURGUNDY & GOLD (Ottoman lacquer)
   The other great tazhib pairing: madder burgundy + gold on ivory, as in
   Ottoman bindings and red-ground Qur'anic illumination. Dark mode is deep
   burgundy ink with dusty-rose accents. Same two-hue structure as A/C.
   ========================================================================== */

html[data-resolved-theme="light"] body[data-palette="burgundy"] {
  --bg-page: #FAF8F6;  --bg-card: #FFFFFF;  --bg-subtle: #F5F0F1;  --bg-hover: #EEE6E8;

  --text-primary: #1D1A19;  --text-secondary: #403B39;
  --text-tertiary: #6E6663; --text-quaternary: #9A908D;

  --border-subtle: #EBE3E4;  --border-default: #DBD0D2;
  --border-strong: #BCAFB2;  --border-light: rgba(92, 36, 48, 0.12);

  --shadow-color-sm: rgba(51, 17, 26, 0.05);  --shadow-color-md: rgba(51, 17, 26, 0.08);
  --shadow-color-lg: rgba(51, 17, 26, 0.12);  --shadow-color-xl: rgba(51, 17, 26, 0.16);

  --teal-50: #F9EFF1;  --teal-100: #F0DADF;  --teal-200: #E2B8C1;  --teal-300: #CD939F;
  --teal-400: #B26A79; --teal-500: #944555;  --teal-600: #722F3B;  --teal-700: #5C2430;
  --teal-800: #471B25; --teal-900: #33121A;

  --gold-50: #FAF6EC;  --gold-100: #F4EBD6;  --gold-200: #E8D9AE;  --gold-300: #D9C489;
  --gold-400: #C6A962; --gold-500: #B18F4E;  --gold-600: #93743F;  --gold-700: #6F5730;
  --gold: #C6A962;  --gold-dark: #8A5F30;  --gold-light: #E6D5A2;  --gold-softest: #FAF6EC;

  --color-arabic-card: var(--teal-700);
  --color-section-title: var(--teal-700);
  --bg-proof-block: var(--teal-50);

  --color-primary: #5C2430;  --color-primary-rgb: 92, 36, 48;
  --color-accent: #8A5F30;
  --border-medium: #E9E0E1;  --text-muted: #6E6663;
  --btn-bg: #6E2634;  --btn-bg-hover: #5C2430;
}

html[data-resolved-theme="light"] body[data-palette="burgundy"] .v1-hero {
  background: linear-gradient(145deg, var(--teal-700) 0%, var(--teal-800) 60%, var(--teal-900) 100%);
  border: 1px solid rgba(198, 169, 98, 0.28);
}
html[data-resolved-theme="light"] body[data-palette="burgundy"] .v1-hero::before {
  background: radial-gradient(circle at 85% 20%, rgba(198, 169, 98, 0.16), transparent 55%);
}

html[data-resolved-theme="dark"] body[data-palette="burgundy"] {
  --bg-page: #170F12;  --bg-card: #221419;  --bg-subtle: #100A0C;  --bg-hover: #2A181D;
  --bg-primary: #170F12;  --bg-secondary: #100A0C;

  --text-primary: #F2EBE8;  --text-secondary: #D2C6C2;
  --text-tertiary: #9E908C; --text-quaternary: #746664;

  --border-subtle: rgba(255,255,255,0.09);  --border-default: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);  --border-light: rgba(255,255,255,0.07);

  --shadow-color-sm: rgba(0,0,0,0.18);  --shadow-color-md: rgba(0,0,0,0.28);
  --shadow-color-lg: rgba(0,0,0,0.40);  --shadow-color-xl: rgba(0,0,0,0.52);

  --teal-50: rgba(201, 136, 147, 0.08);  --teal-100: rgba(201, 136, 147, 0.14);
  --teal-400: #D8A0AB;  --teal-500: #CE8D99;  --teal-600: #C98893;  --teal-700: #A96A77;

  --gold-50: rgba(220, 192, 140, 0.08);  --gold-100: rgba(220, 192, 140, 0.14);
  --gold-300: #DCC08C;  --gold-400: #CBB078;
  --gold: #CBB078;  --gold-dark: #DCC08C;  --gold-light: rgba(220, 192, 140, 0.22);

  --color-arabic-card: var(--gold-300);
  --color-section-title: var(--teal-500);
  --bg-proof-block: rgba(255,255,255,0.05);

  --color-primary: #CE8D99;  --color-primary-rgb: 206, 141, 153;
  --color-accent: #DCC08C;
  --border-medium: #2E1A20;  --text-muted: #9E908C;
  --btn-bg: #742B38;  --btn-bg-hover: #5C2430;

  --hero-input-bg: #1B0E12;
}

html[data-resolved-theme="dark"] body[data-palette="burgundy"] .v1-hero,
html[data-resolved-theme="dark"] body[data-palette="burgundy"] .bento-hero-name {
  background: linear-gradient(145deg, #2A0E15 0%, #3D141F 60%, #4A1A26 100%);
}
html[data-resolved-theme="dark"] body[data-palette="burgundy"] .v1-search-input-wrap {
  background: var(--hero-input-bg);
}

/* ==========================================================================
   HEADER COLOR-SCHEME MENU — UI chrome (app + review page)
   Mirrors the shipped homepage-layout dropdown. Menu theming uses app
   tokens, so it follows whichever palette is active. Wiring lives in
   iterations/scheme.js (app) / inline (review page).
   ========================================================================== */

.scheme-switch { position: relative; }
.btn-scheme[aria-expanded="true"] { background: var(--bg-hover, rgba(127,127,127,0.12)); }
.scheme-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1500;
  min-width: 300px; max-width: calc(100vw - 24px);
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 36px var(--shadow-color-lg, rgba(0,0,0,0.18)), 0 2px 8px var(--shadow-color-md, rgba(0,0,0,0.10));
}
.scheme-menu-title {
  font: 600 11px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 6px 10px;
}
.scheme-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  appearance: none; background: transparent; border: 0; border-radius: 8px;
  padding: 8px 10px; cursor: pointer; text-align: left;
  font-family: var(--font-ui, system-ui, sans-serif); color: var(--text-primary);
}
.scheme-option:hover { background: var(--bg-hover, rgba(127,127,127,0.10)); }
.scheme-option[aria-checked="true"] { background: var(--bg-subtle, rgba(127,127,127,0.08)); }
.scheme-dots { display: flex; flex: 0 0 auto; }
.scheme-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(128,128,128,0.35); margin-left: -4px;
}
.scheme-dots span:first-child { margin-left: 0; }
.scheme-option-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.scheme-option-name { font-size: 13px; font-weight: 600; }
.scheme-option-desc { font-size: 11.5px; color: var(--text-tertiary); }
.scheme-option-check { flex: 0 0 auto; color: var(--color-primary, #2A5F5C); opacity: 0; }
.scheme-option[aria-checked="true"] .scheme-option-check { opacity: 1; }

@media (max-width: 480px) {
  .scheme-menu { min-width: 260px; }
  .scheme-option-desc { font-size: 11px; }
}