/* Copyright (c) Edward James Harrison (composer of the Neotokyo OST). All rights reserved. */
/*
 * DESIGN TOKENS — the NOW design language, recreated as custom properties (see ../THEME-NOTES.md for sources).
 *
 * Mode works the way NOW's does: an explicit [data-theme] attribute on <html> ("dark" default, "light", "warm"),
 * chosen by the user and persisted, not prefers-color-scheme. NOW's current shipped default (themes/default.json)
 * is the CELESTIAL look, applied as [data-theme-id="celestial"] over the dark mode; this client does the same.
 * The modal is always the night panel (NOW's modal standard has no light variant).
 */

/* ── Mode: dark (NOW reading-v3.css :root / [data-theme="dark"]) ───────────────────────────── */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1318;
  --surface: #161c24;
  --surface-hover: #1e2736;
  --border: rgba(255,255,255,0.1);
  --text: #e0dbd5;
  --text-muted: #9a9490;
  --text-dim: #7a7470;
  --accent: #b8b2f7;
  --accent-bg: rgba(184,178,247,0.12);
  --accent-border: rgba(184,178,247,0.3);
  --accent-rgb: 184,178,247;
  --shadow: rgba(0,0,0,0.5);
  --input-bg: rgba(255,255,255,0.06);
  --gold: #d4af37;               /* COLORS.ui.gold */

  /* game table + card surfaces (derived; see THEME-NOTES) */
  --table-1: #10151c; --table-2: #161c26; --table-3: #0c1015;
  --star: rgba(255,255,255,0.4);
  --slot-line: rgba(255,255,255,0.12);
  --slot-fill: rgba(255,255,255,0.025);
  --card-face-1: #1b2230; --card-face-2: #141a24;
  --card-line: rgba(255,255,255,0.14);
  --card-ink: #ece6de; --card-dim: #a39d97;
  --card-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.35);
  --back-1: #12182a; --back-2: #0b0f1a; --back-ink: rgba(212,175,55,0.55); --back-edge: rgba(212,175,55,0.35);
  --tone-text-mix: 100%;         /* how much of the raw tone ink text keeps (light modes darken it) */
}

/* ── Mode: light (NOW [data-theme="light"]) ─────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3f0;
  --surface: #ffffff;
  --surface-hover: #edeae6;
  --border: rgba(0,0,0,0.1);
  --text: #1e1914;
  --text-muted: #5c554e;
  --text-dim: #8a827a;
  --accent: #2b6cb0;
  --accent-bg: rgba(43,108,176,0.08);
  --accent-border: rgba(43,108,176,0.2);
  --accent-rgb: 43,108,176;
  --shadow: rgba(0,0,0,0.12);
  --input-bg: rgba(0,0,0,0.04);
  --gold: #a06820;

  --table-1: #efebe5; --table-2: #f7f4ef; --table-3: #e9e4dc;
  --star: rgba(0,0,0,0.12);
  --slot-line: rgba(0,0,0,0.14);
  --slot-fill: rgba(0,0,0,0.025);
  --card-face-1: #ffffff; --card-face-2: #f6f3ee;
  --card-line: rgba(0,0,0,0.14);
  --card-ink: #1e1914; --card-dim: #6b6259;
  --card-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 3px 10px rgba(0,0,0,0.10);
  --back-1: #26304d; --back-2: #1a2138; --back-ink: rgba(233,201,138,0.7); --back-edge: rgba(233,201,138,0.45);
  --tone-text-mix: 62%;
}

/* ── Mode: warm (NOW [data-theme="warm"], parchment mid-tone) ───────────────────────────────── */
[data-theme="warm"] {
  color-scheme: light;
  --bg: #d5cabb;
  --surface: #e4dace;
  --surface-hover: #cbbfaf;
  --border: rgba(100,70,40,0.12);
  --text: #2c2218;
  --text-muted: #6b5d4e;
  --text-dim: #8e7e6c;
  --accent: #a06820;
  --accent-bg: rgba(160,104,32,0.1);
  --accent-border: rgba(160,104,32,0.25);
  --accent-rgb: 160,104,32;
  --shadow: rgba(60,40,20,0.2);
  --input-bg: rgba(0,0,0,0.04);
  --gold: #8a5a18;

  --table-1: #d0c4b3; --table-2: #dbd0c1; --table-3: #c9bca9;
  --star: rgba(60,40,20,0.12);
  --slot-line: rgba(100,70,40,0.2);
  --slot-fill: rgba(100,70,40,0.04);
  --card-face-1: #f2ecdd; --card-face-2: #e9e1cf;
  --card-line: rgba(100,70,40,0.2);
  --card-ink: #2c2218; --card-dim: #6b5d4e;
  --card-shadow: 0 1px 0 rgba(60,40,20,0.1), 0 3px 10px rgba(60,40,20,0.16);
  --back-1: #3a2c22; --back-2: #2a1f17; --back-ink: rgba(233,201,138,0.7); --back-edge: rgba(233,201,138,0.45);
  --tone-text-mix: 60%;
}

/* ── Theme identity: CELESTIAL (NOW themes/celestial.css — the shipped default) ────────────────── */
[data-theme-id="celestial"] {
  color-scheme: dark;
  --cel-bg-1: #0b0a1c;
  --cel-bg-2: #141233;
  --cel-bg-3: #0a0916;
  --cel-ink: #dcd9f5;
  --cel-ink-dim: #9b97c4;
  --cel-gold: #e9c98a;
  --cel-cyan: #7fd6ff;
  --cel-violet: #b79cff;
  --cel-line: rgba(150, 160, 255, 0.14);
  --cel-card: rgba(125, 140, 255, 0.045);
  --cel-glow: rgba(127, 214, 255, 0.35);

  --bg: #08071a;
  --surface: #141233;
  --surface-hover: #1e1a45;
  --border: rgba(150, 160, 255, 0.16);
  --text: #dcd9f5;
  --text-muted: #9b97c4;
  --text-dim: #6f6b9c;
  --accent: #b8b2f7;
  --accent-bg: rgba(184, 178, 247, 0.12);
  --accent-border: rgba(184, 178, 247, 0.32);
  --accent-rgb: 184, 178, 247;
  --input-bg: rgba(255, 255, 255, 0.05);
  --shadow: rgba(0, 0, 0, 0.55);
  --gold: var(--cel-gold);

  --table-1: var(--cel-bg-1); --table-2: var(--cel-bg-2); --table-3: var(--cel-bg-3);
  --star: rgba(255,255,255,0.5);
  --slot-line: rgba(150, 160, 255, 0.2);
  --slot-fill: var(--cel-card);
  --card-face-1: #1a1640; --card-face-2: #120f2e;   /* NOW modal-standard --modal-raised2 / between bg and raised */
  --card-line: #2a2556;                              /* --modal-line */
  --card-ink: #ece9ff; --card-dim: #a29cd0;          /* --modal-ink / --modal-dim */
  --card-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.45);
  --back-1: #15123a; --back-2: #0b0a1c; --back-ink: rgba(233,201,138,0.6); --back-edge: rgba(233,201,138,0.38);
  --tone-text-mix: 100%;
}

/* ── Mode-independent tokens ────────────────────────────────────────────────────────────────── */
:root {
  /* type: NOW's stacks. Symbols first so astro glyphs draw monochrome in Noto Sans Symbols (unicode-range scoped). */
  --font-glyph: 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Noto Sans Math', 'Noto Sans', 'Cinzel', serif;  /* NOW GLYPH_FONT_STACK, + Cinzel for letter glyphs (e.g. numerals) */
  --font-body: 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-display: 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Cinzel', serif;
  --font-wordmark: 'Cinzel Decorative', 'Cinzel', serif;
  --font-quote: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fs-standard: 13px;

  /* tone inks — NOW's TEXT/UI hues (data/colors.js PLANET_INK, data/term-colors.js ELEMENT_INK, HOUSE_INK) */
  --ink-sun: #ffd166; --ink-moon: #e6e6e6; --ink-mercury: #7ed3a8; --ink-venus: #e9aab5;
  --ink-mars: #ef6c5b; --ink-jupiter: #f5a93a; --ink-saturn: #7895c1;
  --ink-rahu: #888aaf; --ink-ketu: #8b8076;
  --ink-uranus: #6dd0c5; --ink-neptune: #6bb4d8; --ink-pluto: #8a6b9c; --ink-chiron: #c0a890;
  --ink-fire: #ef8a5a; --ink-earth: #b8956a; --ink-air: #7fb6db; --ink-water: #a98fd2;
  --ink-neutral: #d6b988;
  /* modalities: NOW's canvas COLORS.modes softened toward the night ink for text use (derived — see notes) */
  --ink-cardinal: color-mix(in oklab, #FF0066 55%, #dcd9f5);
  --ink-fixed: color-mix(in oklab, #8800FF 50%, #dcd9f5);
  --ink-mutable: color-mix(in oklab, #00CCCC 55%, #dcd9f5);

  /* CATEGORY tones (contract: a tone never encodes a card's correspondence). A planet, element or modality card
     wears its own ink above, because that card IS the thing. Every other category wears a hue taken from NOW's
     non-astrological chrome palette (themes/celestial.css, themes/nocturne.json, reading-v3.css), shared by every
     card of the category, so the colour can never single out an answer. The four suits share ONE ink on purpose:
     four distinct suit hues would be read against the four element inks and give the suit's element away. */
  --ink-sign: #b8b2f7;          /* --accent (celestial periwinkle) */
  --ink-major: #e9c98a;         /* --cel-gold */
  --ink-minor: #dcd9f5;         /* --cel-ink (silver) */
  --ink-wands: var(--ink-minor); --ink-cups: var(--ink-minor); --ink-swords: var(--ink-minor); --ink-pentacles: var(--ink-minor);
  --ink-greek: #7fd6ff;         /* --cel-cyan */
  --ink-roman: #e0708a;         /* nocturne rose */
  --ink-babylonian: #c9a35a;    /* --interlink-accent (ochre) */
  --ink-vedic: #7ee0c0;         /* nocturne mint */
  --ink-germanic: #b79cff;      /* --cel-violet */
  --ink-dies: #9b97c4;          /* --cel-ink-dim */
  --ink-metal: #e7e3d9;         /* --cal-tile (off-white) */
  --ink-kamea: #d6b988;         /* HOUSE_INK (neutral gold) */
  --ink-nakshatra: #7fd6ff;     /* --cel-cyan (the Nakshatra family holds no Greek deities) */
  --ink-pada: #b79cff;          /* --cel-violet */

  /* the modal standard (NOW ui/modal-standard.css) — always the night panel */
  --modal-bg: #0e0d24; --modal-raised: #151236; --modal-raised2: #1a1640; --modal-line: #2a2556;
  --modal-ink: #ece9ff; --modal-text: #d9d5f0; --modal-dim: #a29cd0; --modal-faint: #736da3;
  --modal-accent-default: #b9a6ff;
  --modal-scale: 1;

  /* geometry */
  --radius-card: 9%;
  --gutter: 16px;
  --header-h: 56px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.3,1.4,.5,1);
}