/* ──────────────────────────────────────────────────────────────────────────
   Kenoma design-token layer — the single source of truth for the design
   language, shared by the app (style.css) and the native docs viewer
   (docs/docs.css). Holds ONLY design tokens: the :root defaults plus one
   [data-theme='…'] block per theme. No component or layout CSS lives here.

   Load order matters: this file MUST be linked BEFORE style.css / docs.css so
   the cascade is unchanged. :root and [data-theme='…'] have equal specificity
   (0,1,0), so the active theme overriding :root depends on :root coming first.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg-primary: #090d1a;
  --bg-secondary: #0f1528;
  --bg-tertiary: #182038;
  --bg-input: #090d1a;
  --text-primary: #dcdff8;
  --text-secondary: #8090b8;
  --text-muted: #606990;
  --accent: #e84070;
  --accent-hover: #d03060;
  --accent-btn: #b83050;
  --label-color: var(--text-primary);
  --online: #40c880;
  --offline: #303858;
  --border: #18223c;
  --error: #e84070;
  --success: #40c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Theme: Exile — cold ash with muted steel-blue */
[data-theme='exile'] {
  --bg-primary: #0d0e10;
  --bg-secondary: #141618;
  --bg-tertiary: #1e2124;
  --bg-input: #0d0e10;
  --text-primary: #ccd0d8;
  --text-secondary: #7989a1;
  --text-muted: #606b80;
  --accent: #7898b8;
  --accent-hover: #6888a8;
  --accent-btn: #6080a0;
  --label-color: var(--text-primary);
  --online: #48b870;
  --offline: #384048;
  --border: #242830;
  --error: #c07878;
  --success: #48b870;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Druid — deep ancient forest with rich emerald */
[data-theme='druid'] {
  --bg-primary: #0a1008;
  --bg-secondary: #101c0e;
  --bg-tertiary: #182c18;
  --bg-input: #0a1008;
  --text-primary: #c0d4b0;
  --text-secondary: #70986a;
  --text-muted: #5a785a;
  --accent: #44c870;
  --accent-hover: #34b860;
  --accent-btn: #30a058;
  --label-color: var(--text-primary);
  --online: #44c870;
  --offline: #2c4830;
  --border: #1c3018;
  --error: #c06050;
  --success: #44c870;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Warlock — pure void with vivid crimson */
[data-theme='warlock'] {
  --bg-primary: #060606;
  --bg-secondary: #0e0e0e;
  --bg-tertiary: #181818;
  --bg-input: #060606;
  --text-primary: #f2f2f2;
  --text-secondary: #b0b0b0;
  --text-muted: #646464;
  --accent: #e02828;
  --accent-hover: #c81c1c;
  --accent-btn: #b01c1c;
  --label-color: var(--text-primary);
  --online: #3ac870;
  --offline: #3c3c3c;
  --border: #282828;
  --error: #e02828;
  --success: #3ac870;
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Theme: Necromancer — void black with blight green */
[data-theme='necromancer'] {
  --bg-primary: #0b0e0b;
  --bg-secondary: #111511;
  --bg-tertiary: #171e17;
  --bg-input: #0b0e0b;
  --text-primary: #c4d4b4;
  --text-secondary: #7a9468;
  --text-muted: #566e4d;
  --accent: #7ecf3c;
  --accent-hover: #6abf2c;
  --accent-btn: #5ea828;
  --label-color: var(--text-primary);
  --online: #7ecf3c;
  --offline: #38503a;
  --border: #1a261a;
  --error: #c05040;
  --success: #7ecf3c;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Sorcerer — midnight deep blue with electric violet */
[data-theme='sorcerer'] {
  --bg-primary: #0c0a18;
  --bg-secondary: #131028;
  --bg-tertiary: #1c1840;
  --bg-input: #0c0a18;
  --text-primary: #d8d0f0;
  --text-secondary: #9888c8;
  --text-muted: #68638e;
  --accent: #a855f7;
  --accent-hover: #9040e0;
  --accent-btn: #8040d8;
  --label-color: var(--text-primary);
  --online: #34d399;
  --offline: #3a305e;
  --border: #201c3c;
  --error: #e05070;
  --success: #34d399;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Theme: Witch — shadow-black with ghostly pale lavender */
[data-theme='witch'] {
  --bg-primary: #0c0c14;
  --bg-secondary: #13131e;
  --bg-tertiary: #1c1c2c;
  --bg-input: #0c0c14;
  --text-primary: #d4d0ec;
  --text-secondary: #8880a8;
  --text-muted: #6b638e;
  --accent: #c8b8f8;
  --accent-hover: #b8a4f0;
  --accent-btn: #8868c8;
  --label-color: var(--text-primary);
  --online: #50c880;
  --offline: #343048;
  --border: #1e1c30;
  --error: #d06080;
  --success: #50c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Arcanist — deep indigo with arcane gold */
[data-theme='arcanist'] {
  --bg-primary: #0a0a1c;
  --bg-secondary: #10102c;
  --bg-tertiary: #18183e;
  --bg-input: #0a0a1c;
  --text-primary: #e0ddf8;
  --text-secondary: #9898c8;
  --text-muted: #636390;
  --accent: #c8a840;
  --accent-hover: #b89830;
  --accent-btn: #a08830;
  --label-color: var(--text-primary);
  --online: #44c870;
  --offline: #383868;
  --border: #1e1e40;
  --error: #c85060;
  --success: #44c870;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Shaman — dark sienna earth with vermilion ritual-fire */
[data-theme='shaman'] {
  --bg-primary: #160c08;
  --bg-secondary: #201410;
  --bg-tertiary: #2c1c18;
  --bg-input: #160c08;
  --text-primary: #e8c8b8;
  --text-secondary: #ae7a6b;
  --text-muted: #8d5e54;
  --accent: #c84830;
  --accent-hover: #b03c26;
  --accent-btn: #a03820;
  --label-color: var(--text-primary);
  --online: #58b860;
  --offline: #503830;
  --border: #301c18;
  --error: #c04038;
  --success: #58b860;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Psion — cold steel with crystalline cyan */
[data-theme='psion'] {
  --bg-primary: #0a1018;
  --bg-secondary: #101820;
  --bg-tertiary: #18222e;
  --bg-input: #0a1018;
  --text-primary: #c8d8ec;
  --text-secondary: #6890b8;
  --text-muted: #506e8c;
  --accent: #00c8d8;
  --accent-hover: #00b0c0;
  --accent-btn: #00a0b0;
  --label-color: var(--text-primary);
  --online: #44c884;
  --offline: #2c4058;
  --border: #182030;
  --error: #d06080;
  --success: #44c884;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Stormcaller — storm grey with lightning gold */
[data-theme='stormcaller'] {
  --bg-primary: #0e0e0c;
  --bg-secondary: #161614;
  --bg-tertiary: #20201c;
  --bg-input: #0e0e0c;
  --text-primary: #e8e8d4;
  --text-secondary: #a0a088;
  --text-muted: #6b6b59;
  --accent: #d4c830;
  --accent-hover: #c4b820;
  --accent-btn: #a09c20;
  --label-color: var(--text-primary);
  --online: #50c068;
  --offline: #404038;
  --border: #282820;
  --error: #c85040;
  --success: #50c068;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Alchemist — dark olive-grey with acid sulfur-green */
[data-theme='alchemist'] {
  --bg-primary: #0c1008;
  --bg-secondary: #141a0e;
  --bg-tertiary: #1c2414;
  --bg-input: #0c1008;
  --text-primary: #d0d8b0;
  --text-secondary: #88a060;
  --text-muted: #5e714b;
  --accent: #a0c418;
  --accent-hover: #8cb010;
  --accent-btn: #789808;
  --label-color: var(--text-primary);
  --online: #58b860;
  --offline: #384830;
  --border: #202e14;
  --error: #c05040;
  --success: #58b860;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Enchanter — deep plum with vivid rose */
[data-theme='enchanter'] {
  --bg-primary: #140c18;
  --bg-secondary: #1e1228;
  --bg-tertiary: #281838;
  --bg-input: #140c18;
  --text-primary: #ead0f0;
  --text-secondary: #b078c0;
  --text-muted: #7a608b;
  --accent: #d45cb4;
  --accent-hover: #c04ca0;
  --accent-btn: #a84490;
  --label-color: var(--text-primary);
  --online: #50c880;
  --offline: #503060;
  --border: #281838;
  --error: #d05060;
  --success: #50c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Theme: Oracle — void-black with deep sapphire blue */
[data-theme='oracle'] {
  --bg-primary: #080810;
  --bg-secondary: #0e0e1c;
  --bg-tertiary: #151528;
  --bg-input: #080810;
  --text-primary: #c8c8e4;
  --text-secondary: #7880a8;
  --text-muted: #60608a;
  --accent: #4880e0;
  --accent-hover: #3870d0;
  --accent-btn: #3460b8;
  --label-color: var(--text-primary);
  --online: #44c880;
  --offline: #2c2c50;
  --border: #141428;
  --error: #c86070;
  --success: #44c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Hexblade — void black with eldritch sea-jade */
[data-theme='hexblade'] {
  --bg-primary: #06080a;
  --bg-secondary: #0c1018;
  --bg-tertiary: #141820;
  --bg-input: #06080a;
  --text-primary: #b8c8c0;
  --text-secondary: #6888a0;
  --text-muted: #50677e;
  --accent: #40e0a0;
  --accent-hover: #30c890;
  --accent-btn: #28b878;
  --label-color: var(--text-primary);
  --online: #40e0a0;
  --offline: #283848;
  --border: #141c28;
  --error: #d06070;
  --success: #40e0a0;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Pyromancer — dark charcoal with vivid lava-orange */
[data-theme='pyromancer'] {
  --bg-primary: #100c06;
  --bg-secondary: #181208;
  --bg-tertiary: #221a10;
  --bg-input: #100c06;
  --text-primary: #f0d4b8;
  --text-secondary: #b08858;
  --text-muted: #7c623e;
  --accent: #f06020;
  --accent-hover: #e05010;
  --accent-btn: #c04810;
  --label-color: var(--text-primary);
  --online: #50c068;
  --offline: #484020;
  --border: #2c2010;
  --error: #e03030;
  --success: #50c068;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* ── Light Themes ────────────────────────────────────────── */
/* Ombre depth: bg-tertiary (nav rail, leftmost) → bg-secondary (sidebar)
   → bg-primary (content, lightest) creates a natural left-to-right gradient
   through panel layering. The light-theme body gradient that pairs with each
   of these lives in style.css (it is page treatment, not a token).         */

/* Scholar — warm academia: parchment, ink-navy, rose */
[data-theme='scholar'] {
  --bg-primary: #f6f3ed;
  --bg-secondary: #ede8de;
  --bg-tertiary: #e0d9cd;
  --bg-input: #faf8f4;
  --text-primary: #1e1a30;
  --text-secondary: #4a4870;
  --text-muted: #706e92;
  --accent: #b02848;
  --accent-hover: #8c1e38;
  --label-color: var(--accent);
  --online: #1e7838;
  --offline: #c4bdb4;
  --border: #ccc4b8;
  --error: #b02848;
  --success: #1e7838;
  --nav-hover-bg: rgba(30, 26, 48, 0.06);
}

/* Paladin — cool minimal: steel sky, ocean navy, teal */
[data-theme='paladin'] {
  --bg-primary: #f2f6fa;
  --bg-secondary: #e4ecf4;
  --bg-tertiary: #d4e0ec;
  --bg-input: #f8fafb;
  --text-primary: #0c1828;
  --text-secondary: #3a5870;
  --text-muted: #5c7890;
  --accent: #005c88;
  --accent-hover: #004468;
  --label-color: var(--accent);
  --online: #1a8850;
  --offline: #b0c4d8;
  --border: #bcccd8;
  --error: #c02838;
  --success: #1a8850;
  --nav-hover-bg: rgba(12, 24, 40, 0.05);
}

/* Bard — warm cozy: amber cream, dark sienna, deep ember-orange */
[data-theme='bard'] {
  --bg-primary: #f8f2eb;
  --bg-secondary: #eee3d3;
  --bg-tertiary: #e2d3be;
  --bg-input: #faf7f2;
  --text-primary: #1c1008;
  --text-secondary: #5a3a18;
  --text-muted: #8a6440;
  --accent: #b03c10;
  --accent-hover: #8c2c08;
  --label-color: var(--accent);
  --online: #287038;
  --offline: #c8b898;
  --border: #d0c0a4;
  --error: #b03c10;
  --success: #287038;
  --nav-hover-bg: rgba(28, 16, 8, 0.05);
}

/* Cleric — warm ivory, amber gold, divine */
[data-theme='cleric'] {
  --bg-primary: #faf6ef;
  --bg-secondary: #f0e8d8;
  --bg-tertiary: #e4d8c4;
  --bg-input: #fdf9f2;
  --text-primary: #201800;
  --text-secondary: #5a4400;
  --text-muted: #8a6820;
  --accent: #b07818;
  --accent-hover: #8c5e10;
  --label-color: var(--accent);
  --online: #2a7030;
  --offline: #ccc0a0;
  --border: #d8c898;
  --error: #c03420;
  --success: #2a7030;
  --nav-hover-bg: rgba(32, 24, 0, 0.06);
}

/* Ranger — parchment tan, forest green, earth */
[data-theme='ranger'] {
  --bg-primary: #f4f0e8;
  --bg-secondary: #e8e0d0;
  --bg-tertiary: #d8d0bc;
  --bg-input: #f9f7f0;
  --text-primary: #181c10;
  --text-secondary: #485028;
  --text-muted: #708040;
  --accent: #527828;
  --accent-hover: #406020;
  --label-color: var(--accent);
  --online: #286830;
  --offline: #c0b898;
  --border: #c8c0a4;
  --error: #a83020;
  --success: #286830;
  --nav-hover-bg: rgba(24, 28, 16, 0.06);
}

/* Rogue — cool pearl, slate violet, subtle */
[data-theme='rogue'] {
  --bg-primary: #f4f3f8;
  --bg-secondary: #e8e6f0;
  --bg-tertiary: #d8d4e8;
  --bg-input: #f9f8fc;
  --text-primary: #16141e;
  --text-secondary: #484060;
  --text-muted: #6e6888;
  --accent: #6840b8;
  --accent-hover: #5028a0;
  --label-color: var(--accent);
  --online: #2a8050;
  --offline: #c0bcd0;
  --border: #c8c4d8;
  --error: #c02848;
  --success: #2a8050;
  --nav-hover-bg: rgba(22, 20, 30, 0.06);
}

/* Monk — seafoam mist, serene teal, zen */
[data-theme='monk'] {
  --bg-primary: #f0f6f4;
  --bg-secondary: #e0ecec;
  --bg-tertiary: #ccdede;
  --bg-input: #f6fbfb;
  --text-primary: #0c1c1e;
  --text-secondary: #2a5050;
  --text-muted: #4a7070;
  --accent: #1a6868;
  --accent-hover: #125050;
  --label-color: var(--accent);
  --online: #1a8050;
  --offline: #b0c8c8;
  --border: #b8d0d0;
  --error: #b02828;
  --success: #1a8050;
  --nav-hover-bg: rgba(12, 28, 30, 0.05);
}

/* Herald — sky blue, vivid azure, clean */
[data-theme='herald'] {
  --bg-primary: #f0f6ff;
  --bg-secondary: #e0edff;
  --bg-tertiary: #cce0ff;
  --bg-input: #f8fbff;
  --text-primary: #08182a;
  --text-secondary: #204068;
  --text-muted: #446090;
  --accent: #0060d0;
  --accent-hover: #0048b0;
  --label-color: var(--accent);
  --online: #1a9050;
  --offline: #b0c8e8;
  --border: #b8d4f0;
  --error: #b82020;
  --success: #1a9050;
  --nav-hover-bg: rgba(8, 24, 42, 0.05);
}

/* Knight — cool grey, steel navy, armored */
[data-theme='knight'] {
  --bg-primary: #f2f3f6;
  --bg-secondary: #e4e7ec;
  --bg-tertiary: #d4d8e2;
  --bg-input: #f8f9fb;
  --text-primary: #101418;
  --text-secondary: #38424c;
  --text-muted: #607080;
  --accent: #405090;
  --accent-hover: #2a3878;
  --label-color: var(--accent);
  --online: #2a8858;
  --offline: #b8c0cc;
  --border: #c4c8d4;
  --error: #b82030;
  --success: #2a8858;
  --nav-hover-bg: rgba(16, 20, 24, 0.05);
}

/* Sage — pale sage green, olive, wise */
[data-theme='sage'] {
  --bg-primary: #f2f5ef;
  --bg-secondary: #e4e8de;
  --bg-tertiary: #d4dacb;
  --bg-input: #f8faf5;
  --text-primary: #141810;
  --text-secondary: #3c4830;
  --text-muted: #608050;
  --accent: #508038;
  --accent-hover: #3c6428;
  --label-color: var(--accent);
  --online: #286840;
  --offline: #bccaaa;
  --border: #c4ceb0;
  --error: #a83028;
  --success: #286840;
  --nav-hover-bg: rgba(20, 24, 16, 0.05);
}

/* Valkyrie — warm peach-orange, coral amber, radiant */
[data-theme='valkyrie'] {
  --bg-primary: #faf3ec;
  --bg-secondary: #f0e5d4;
  --bg-tertiary: #e4d3bc;
  --bg-input: #fdf8f2;
  --text-primary: #201000;
  --text-secondary: #603808;
  --text-muted: #906040;
  --accent: #c86820;
  --accent-hover: #a85010;
  --label-color: var(--accent);
  --online: #2a7840;
  --offline: #ccc0a0;
  --border: #d8c8a8;
  --error: #c03018;
  --success: #2a7840;
  --nav-hover-bg: rgba(32, 16, 0, 0.05);
}

/* Tourist — pale lavender, pink-violet, wandering */
[data-theme='tourist'] {
  --bg-primary: #f8f0f8;
  --bg-secondary: #ede4ef;
  --bg-tertiary: #e0d0e4;
  --bg-input: #fdf8fe;
  --text-primary: #20102a;
  --text-secondary: #583068;
  --text-muted: #806090;
  --accent: #a030b8;
  --accent-hover: #8820a0;
  --label-color: var(--accent);
  --online: #2a7848;
  --offline: #c8b8d4;
  --border: #d0c0de;
  --error: #c03028;
  --success: #2a7848;
  --nav-hover-bg: rgba(32, 16, 42, 0.05);
}

/* Wanderer — dusty rose, warm terracotta, weathered */
[data-theme='wanderer'] {
  --bg-primary: #f8f0ed;
  --bg-secondary: #ede4e0;
  --bg-tertiary: #dfd3ce;
  --bg-input: #fbf7f5;
  --text-primary: #201012;
  --text-secondary: #603838;
  --text-muted: #886060;
  --accent: #a84840;
  --accent-hover: #883030;
  --label-color: var(--accent);
  --online: #2a7048;
  --offline: #c8b8b4;
  --border: #d4c4c0;
  --error: #b02838;
  --success: #2a7048;
  --nav-hover-bg: rgba(32, 16, 18, 0.05);
}

/* Templar — pure cool white, sapphire royal, holy */
[data-theme='templar'] {
  --bg-primary: #f6f8fc;
  --bg-secondary: #eaeff8;
  --bg-tertiary: #d8e2f4;
  --bg-input: #fafbfe;
  --text-primary: #0a1020;
  --text-secondary: #203858;
  --text-muted: #486090;
  --accent: #1848c0;
  --accent-hover: #1030a8;
  --label-color: var(--accent);
  --online: #1a9060;
  --offline: #b0c4e4;
  --border: #bcd0ec;
  --error: #c02028;
  --success: #1a9060;
  --nav-hover-bg: rgba(10, 16, 32, 0.05);
}

/* Woodsman — bright spring green, lush growth */
[data-theme='woodsman'] {
  --bg-primary: #effaf0;
  --bg-secondary: #ddf2e0;
  --bg-tertiary: #c8e8cc;
  --bg-input: #f6fdf6;
  --text-primary: #0c1c0e;
  --text-secondary: #285030;
  --text-muted: #4a7850;
  --accent: #3aa028;
  --accent-hover: #288018;
  --label-color: var(--accent);
  --online: #1a9040;
  --offline: #a8c8ac;
  --border: #b4d8b8;
  --error: #b82028;
  --success: #1a9040;
  --nav-hover-bg: rgba(12, 28, 14, 0.05);
}

/* Fighter — icy white-blue, crisp cyan, precise */
[data-theme='fighter'] {
  --bg-primary: #f0f8fc;
  --bg-secondary: #e0f0f8;
  --bg-tertiary: #cce4f4;
  --bg-input: #f6fbfe;
  --text-primary: #081820;
  --text-secondary: #1c4860;
  --text-muted: #4a7898;
  --accent: #0898c0;
  --accent-hover: #0878a0;
  --label-color: var(--accent);
  --online: #1a9060;
  --offline: #a0c0d8;
  --border: #b0d0e8;
  --error: #b82028;
  --success: #1a9060;
  --nav-hover-bg: rgba(8, 24, 32, 0.05);
}