/* ============================================================
   Palette System — 6 palettes × dark/light variants
   Each palette declares the same token set so the UI can swap
   the entire visual language by toggling [data-palette] + [data-mode]
   ============================================================ */

:root {
  /* Defaults filled by JS via [data-palette] + [data-mode] cascade */
  --bg: #0e0c0a;
  --bg-elev: #16120e;
  --bg-soft: #1c1814;
  --ink: #f4ece2;
  --ink-soft: #c9bfb1;
  --ink-mute: #8a8275;
  --line: rgba(244, 236, 226, 0.10);
  --line-soft: rgba(244, 236, 226, 0.06);
  --accent: #c97a4a;
  --accent-soft: rgba(201, 122, 74, 0.18);
  --accent-ink: #fff;
  --grain-opacity: 0.04;
  --hero-tint-1: rgba(201, 122, 74, 0.22);
  --hero-tint-2: rgba(14, 12, 10, 0.65);
  --selection: rgba(201, 122, 74, 0.35);
  --shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}

/* ----------------------------------------
   A · Copper Obsidian
---------------------------------------- */
[data-palette="copper"][data-mode="dark"] {
  --bg: #0e0c0a;
  --bg-elev: #16120e;
  --bg-soft: #1c1814;
  --ink: #f4ece2;
  --ink-soft: #c9bfb1;
  --ink-mute: #8a8275;
  --line: rgba(244, 236, 226, 0.10);
  --line-soft: rgba(244, 236, 226, 0.06);
  --accent: #c97a4a;
  --accent-soft: rgba(201, 122, 74, 0.18);
  --accent-ink: #1a0f08;
  --hero-tint-1: rgba(201, 122, 74, 0.22);
  --hero-tint-2: rgba(14, 12, 10, 0.65);
  --selection: rgba(201, 122, 74, 0.35);
}
[data-palette="copper"][data-mode="light"] {
  --bg: #f6efe6;
  --bg-elev: #efe5d6;
  --bg-soft: #e6dac7;
  --ink: #1d130a;
  --ink-soft: #4d3f2e;
  --ink-mute: #836f54;
  --line: rgba(29, 19, 10, 0.14);
  --line-soft: rgba(29, 19, 10, 0.07);
  --accent: #b25a2a;
  --accent-soft: rgba(178, 90, 42, 0.16);
  --accent-ink: #fff;
  --hero-tint-1: rgba(178, 90, 42, 0.22);
  --hero-tint-2: rgba(246, 239, 230, 0.55);
  --selection: rgba(178, 90, 42, 0.28);
}

/* ----------------------------------------
   B · Terminal Forest
---------------------------------------- */
[data-palette="forest"][data-mode="dark"] {
  --bg: #07100b;
  --bg-elev: #0c1812;
  --bg-soft: #11201a;
  --ink: #e7f0e9;
  --ink-soft: #b7c8bc;
  --ink-mute: #76897d;
  --line: rgba(231, 240, 233, 0.10);
  --line-soft: rgba(231, 240, 233, 0.06);
  --accent: #4ade80;
  --accent-soft: rgba(74, 222, 128, 0.16);
  --accent-ink: #04130a;
  --hero-tint-1: rgba(74, 222, 128, 0.18);
  --hero-tint-2: rgba(7, 16, 11, 0.7);
  --selection: rgba(74, 222, 128, 0.30);
}
[data-palette="forest"][data-mode="light"] {
  --bg: #eef3ec;
  --bg-elev: #e3ebdf;
  --bg-soft: #d6e1d1;
  --ink: #0a1a10;
  --ink-soft: #345240;
  --ink-mute: #5b7867;
  --line: rgba(10, 26, 16, 0.12);
  --line-soft: rgba(10, 26, 16, 0.06);
  --accent: #1f7a4d;
  --accent-soft: rgba(31, 122, 77, 0.14);
  --accent-ink: #fff;
  --hero-tint-1: rgba(31, 122, 77, 0.18);
  --hero-tint-2: rgba(238, 243, 236, 0.55);
  --selection: rgba(31, 122, 77, 0.25);
}

/* ----------------------------------------
   C · Midnight Indigo
---------------------------------------- */
[data-palette="indigo"][data-mode="dark"] {
  --bg: #0a0c14;
  --bg-elev: #11141f;
  --bg-soft: #171b2a;
  --ink: #e8eaf3;
  --ink-soft: #b6bccf;
  --ink-mute: #767e96;
  --line: rgba(232, 234, 243, 0.10);
  --line-soft: rgba(232, 234, 243, 0.06);
  --accent: #818cf8;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-ink: #0a0c14;
  --hero-tint-1: rgba(129, 140, 248, 0.20);
  --hero-tint-2: rgba(10, 12, 20, 0.7);
  --selection: rgba(129, 140, 248, 0.30);
}
[data-palette="indigo"][data-mode="light"] {
  --bg: #f3f4fb;
  --bg-elev: #eaecf6;
  --bg-soft: #dee1f0;
  --ink: #0e1226;
  --ink-soft: #3a4166;
  --ink-mute: #6b7396;
  --line: rgba(14, 18, 38, 0.12);
  --line-soft: rgba(14, 18, 38, 0.06);
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.14);
  --accent-ink: #fff;
  --hero-tint-1: rgba(79, 70, 229, 0.18);
  --hero-tint-2: rgba(243, 244, 251, 0.55);
  --selection: rgba(79, 70, 229, 0.25);
}

/* ----------------------------------------
   D · Ivory Editorial
---------------------------------------- */
[data-palette="ivory"][data-mode="dark"] {
  /* dark variant of ivory: warm dark cream-on-ink */
  --bg: #14110d;
  --bg-elev: #1d1812;
  --bg-soft: #261f17;
  --ink: #f3ead8;
  --ink-soft: #c8b99e;
  --ink-mute: #8a7d65;
  --line: rgba(243, 234, 216, 0.10);
  --line-soft: rgba(243, 234, 216, 0.06);
  --accent: #d97757;
  --accent-soft: rgba(217, 119, 87, 0.18);
  --accent-ink: #1a0f08;
  --hero-tint-1: rgba(217, 119, 87, 0.22);
  --hero-tint-2: rgba(20, 17, 13, 0.65);
  --selection: rgba(217, 119, 87, 0.30);
}
[data-palette="ivory"][data-mode="light"] {
  --bg: #f6f1e7;
  --bg-elev: #efe7d6;
  --bg-soft: #e6dcc6;
  --ink: #1a1308;
  --ink-soft: #4a3a26;
  --ink-mute: #7e6a4f;
  --line: rgba(26, 19, 8, 0.14);
  --line-soft: rgba(26, 19, 8, 0.07);
  --accent: #c0532b;
  --accent-soft: rgba(192, 83, 43, 0.14);
  --accent-ink: #fff;
  --hero-tint-1: rgba(192, 83, 43, 0.18);
  --hero-tint-2: rgba(246, 241, 231, 0.55);
  --selection: rgba(192, 83, 43, 0.25);
}

/* ----------------------------------------
   E · Electric Noir
---------------------------------------- */
[data-palette="noir"][data-mode="dark"] {
  --bg: #000000;
  --bg-elev: #0a0a0a;
  --bg-soft: #141414;
  --ink: #f5f5f5;
  --ink-soft: #b5b5b5;
  --ink-mute: #6e6e6e;
  --line: rgba(245, 245, 245, 0.10);
  --line-soft: rgba(245, 245, 245, 0.05);
  --accent: #c8ff00;
  --accent-soft: rgba(200, 255, 0, 0.16);
  --accent-ink: #000;
  --hero-tint-1: rgba(200, 255, 0, 0.18);
  --hero-tint-2: rgba(0, 0, 0, 0.7);
  --selection: rgba(200, 255, 0, 0.30);
}
[data-palette="noir"][data-mode="light"] {
  --bg: #f4f4f4;
  --bg-elev: #ebebeb;
  --bg-soft: #dcdcdc;
  --ink: #050505;
  --ink-soft: #303030;
  --ink-mute: #6a6a6a;
  --line: rgba(5, 5, 5, 0.14);
  --line-soft: rgba(5, 5, 5, 0.06);
  --accent: #5a7a00;
  --accent-soft: rgba(90, 122, 0, 0.16);
  --accent-ink: #fff;
  --hero-tint-1: rgba(90, 122, 0, 0.18);
  --hero-tint-2: rgba(244, 244, 244, 0.55);
  --selection: rgba(90, 122, 0, 0.25);
}

/* ----------------------------------------
   F · Neo Magenta
---------------------------------------- */
[data-palette="magenta"][data-mode="dark"] {
  --bg: #100711;
  --bg-elev: #1a0d1c;
  --bg-soft: #241328;
  --ink: #f2e8f3;
  --ink-soft: #c5b1c8;
  --ink-mute: #8a7390;
  --line: rgba(242, 232, 243, 0.10);
  --line-soft: rgba(242, 232, 243, 0.06);
  --accent: #ff3d96;
  --accent-soft: rgba(255, 61, 150, 0.16);
  --accent-ink: #1a0612;
  --hero-tint-1: rgba(255, 61, 150, 0.22);
  --hero-tint-2: rgba(16, 7, 17, 0.7);
  --selection: rgba(255, 61, 150, 0.30);
}
[data-palette="magenta"][data-mode="light"] {
  --bg: #fbf0f6;
  --bg-elev: #f3e3ec;
  --bg-soft: #ead3df;
  --ink: #1a0612;
  --ink-soft: #4a2e3f;
  --ink-mute: #82627a;
  --line: rgba(26, 6, 18, 0.12);
  --line-soft: rgba(26, 6, 18, 0.06);
  --accent: #c81f6f;
  --accent-soft: rgba(200, 31, 111, 0.14);
  --accent-ink: #fff;
  --hero-tint-1: rgba(200, 31, 111, 0.18);
  --hero-tint-2: rgba(251, 240, 246, 0.55);
  --selection: rgba(200, 31, 111, 0.25);
}

/* ============================================================
   Type stacks — selectable via [data-type]
   ============================================================ */
[data-type="editorial"] {
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --display-tracking: -0.02em;
  --display-weight: 400;
}
[data-type="grotesque"] {
  --font-display: "Geist", "Inter", -apple-system, sans-serif;
  --font-body: "Geist", "Inter", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --display-tracking: -0.04em;
  --display-weight: 600;
}
[data-type="terminal"] {
  --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "Geist", "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-tracking: -0.02em;
  --display-weight: 500;
}
[data-type="geometric"] {
  --font-display: "Space Grotesk", "Geist", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-tracking: -0.03em;
  --display-weight: 500;
}