/*
 * Hearthstead design tokens (Roadmap/49 D2): the single source of truth for
 * colour, type, spacing, radii, elevation, motion, layers and breakpoints.
 *
 * Load order on every page:
 *     fonts.css -> css/tokens.css -> css/base.css -> legacy CSS
 *     -> css/hs-components.css -> css/shell.css -> tailwind.css
 *
 * Themes: [data-theme="dark"] (default) and [data-theme="light"]
 * ("parchment"). /js/theme.js sets the attribute on <html> before first paint
 * from the stored choice or prefers-color-scheme; without JS the page is
 * dark. Any element may carry data-theme to show the other theme inside it
 * (the style guide's side-by-side panes): the semantic tokens are inherited
 * custom properties, so a subtree follows its nearest themed ancestor.
 * Tailwind (tailwind.config.js) and the legacy stylesheets read these
 * variables; the legacy names at the end of each theme are aliases of the
 * semantic ones so old page bodies follow the theme too.
 *
 * Contrast: every text token reaches WCAG AA (4.5:1) on bg, surface and
 * raised of its theme, --on-accent/--on-danger reach 4.5:1 on their fills,
 * --border-strong and --focus reach 3:1 (non-text UI). `npm run contrast`
 * checks every pair listed in scripts/contrast.js against this file.
 * The same palette is exported to scripts as window.HS_BRAND (js/brand.js).
 */

/* ======================= Dark (default) ======================= */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces: page, cards, raised (menus, dialogs, hover), sunken wells. */
    --bg: #121110;
    --surface: #1b1917;
    --raised: #24211e;
    --sunken: #0e0d0c;
    --chrome: #161413;               /* sidebar, rail, tab bar */
    --overlay: rgba(8, 6, 4, 0.62);  /* dialog and sheet backdrops */
    --hover: rgba(241, 235, 227, 0.055);
    --pressed: rgba(241, 235, 227, 0.09);

    /* Lines. --border separates; --border-strong outlines form controls. */
    --border: #35302b;
    --border-strong: #7a6f64;

    /* Text. */
    --text: #f1ebe3;                 /* 15.9:1 on bg */
    --text-muted: #b3a99c;           /*  6.9:1 on raised */
    --text-subtle: #978d82;          /*  4.9:1 on raised */
    --text-inverse: #121110;

    /* Accent: ember. */
    --accent: #e8893a;
    --accent-hover: #f0a35e;
    --accent-pressed: #d0752a;
    --accent-soft: rgba(232, 137, 58, 0.15);
    --accent-text: #f0a35e;          /* accent-coloured text on tints */
    --on-accent: #1a0f05;            /*  7.2:1 on accent */

    /* Secondary hues. */
    --moss: #7fa56a;
    --river: #6aa0c8;

    /* Status. Each works as text/icon colour on every surface and as a fill
       under its --on-* ink. */
    --success: #6fb56a;
    --warning: #e0b341;
    --danger: #ec7b70;
    --info: #74a9d0;
    --on-success: #0c1a0b;
    --on-warning: #1f1602;
    --on-danger: #1f0a07;            /*  6.9:1 on danger */
    --success-soft: rgba(111, 181, 106, 0.15);
    --warning-soft: rgba(224, 179, 65, 0.15);
    --danger-soft: rgba(236, 123, 112, 0.15);
    --info-soft: rgba(116, 169, 208, 0.15);
    --violet: #b59cf0;               /* quality and alchemy accents */
    --violet-soft: rgba(181, 156, 240, 0.15);

    /* Focus ring (3:1 against every surface). */
    --focus: #f0a35e;
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

    /* Game vitals: hard HP (yellow) drawn behind soft HP (red), as in the
       game's own meter. */
    --hp-hard: #ffc000;
    --hp-soft: #e0453a;
    --stamina: #5aa0dc;
    --energy: #d9b44a;
    --meter-track: #2c2825;

    /* Elevation: a border plus a subtle shadow per level. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.28), 0 8px 20px -6px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 8px 16px -8px rgba(0, 0, 0, 0.45), 0 24px 56px -12px rgba(0, 0, 0, 0.65);

    --scrollbar: #4a433c;
    --scrollbar-hover: #625950;
    --skeleton-from: #221f1c;
    --skeleton-to: #2d2926;

    /* Avatar tones (character initials): eight quiet hues. */
    --tone-0-bg: #5b3a22; --tone-0-fg: #fbe3cc;
    --tone-1-bg: #3f4d2c; --tone-1-fg: #e2f0cf;
    --tone-2-bg: #27435a; --tone-2-fg: #d3e7f6;
    --tone-3-bg: #53334a; --tone-3-fg: #f5d9ec;
    --tone-4-bg: #5a4a1e; --tone-4-fg: #f7ebc4;
    --tone-5-bg: #264a45; --tone-5-fg: #cdeee8;
    --tone-6-bg: #4a3326; --tone-6-fg: #f1dccf;
    --tone-7-bg: #3a3857; --tone-7-fg: #dedcf7;
}

/* ======================= Light ("parchment") ======================= */
[data-theme="light"] {
    color-scheme: light;

    --bg: #f6f1e8;
    --surface: #fffdf8;
    --raised: #ffffff;
    --sunken: #efe8dc;
    --chrome: #efe8dc;
    --overlay: rgba(42, 30, 18, 0.38);
    --hover: rgba(42, 36, 29, 0.05);
    --pressed: rgba(42, 36, 29, 0.09);

    --border: #e3d9c8;
    --border-strong: #8c7f6e;

    --text: #2a241d;
    --text-muted: #6b6053;
    --text-subtle: #736758;
    --text-inverse: #fffdf8;

    --accent: #aa5715;
    --accent-hover: #8f4912;
    --accent-pressed: #7a3e0f;
    --accent-soft: rgba(170, 87, 21, 0.11);
    --accent-text: #8a4410;
    --on-accent: #ffffff;

    --moss: #4a7535;
    --river: #2f6690;

    --success: #37722f;
    --warning: #8a5d00;
    --danger: #b3372b;
    --info: #2f6690;
    --on-success: #ffffff;
    --on-warning: #ffffff;
    --on-danger: #ffffff;
    --success-soft: rgba(55, 114, 47, 0.11);
    --warning-soft: rgba(176, 124, 12, 0.13);
    --danger-soft: rgba(179, 55, 43, 0.10);
    --info-soft: rgba(47, 102, 144, 0.10);
    --violet: #6a4bb8;
    --violet-soft: rgba(106, 75, 184, 0.10);

    --focus: #aa5715;
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

    /* Meters keep the game's colours on a dark groove in both themes. */
    --hp-hard: #ffc000;
    --hp-soft: #e0453a;
    --stamina: #5aa0dc;
    --energy: #d9b44a;
    --meter-track: #2c2825;

    --shadow-1: 0 1px 2px rgba(74, 52, 28, 0.08);
    --shadow-2: 0 1px 3px rgba(74, 52, 28, 0.08), 0 8px 20px -6px rgba(74, 52, 28, 0.16);
    --shadow-3: 0 8px 16px -8px rgba(74, 52, 28, 0.14), 0 24px 56px -12px rgba(74, 52, 28, 0.28);

    --scrollbar: #cfc3b0;
    --scrollbar-hover: #b3a590;
    --skeleton-from: #efe8dc;
    --skeleton-to: #f7f2ea;

    --tone-0-bg: #f6dcc3; --tone-0-fg: #6b3a12;
    --tone-1-bg: #dde9cc; --tone-1-fg: #36511f;
    --tone-2-bg: #d2e3f1; --tone-2-fg: #1f4a6b;
    --tone-3-bg: #f1d6e8; --tone-3-fg: #6a2d56;
    --tone-4-bg: #f3e6bd; --tone-4-fg: #5e4a0c;
    --tone-5-bg: #cfeae4; --tone-5-fg: #1d514a;
    --tone-6-bg: #eed9cc; --tone-6-fg: #5e3620;
    --tone-7-bg: #dcdaf2; --tone-7-fg: #3a376a;
}

/* ======================= Theme-independent scales ======================= */
:root {
    /* Type. Fraunces for display (page titles, hero numbers); Inter for the
       rest. Sizes 12/13/14/16/18/20/24/30/36 with line heights; body text is
       15 px on desktop and 16 px on phones (base.css). */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

    --fs-xs: 12px;   --lh-xs: 16px;
    --fs-sm: 13px;   --lh-sm: 18px;
    --fs-md: 14px;   --lh-md: 20px;
    --fs-body: 15px; --lh-body: 22px;
    --fs-base: 16px; --lh-base: 24px;
    --fs-lg: 18px;   --lh-lg: 26px;
    --fs-xl: 20px;   --lh-xl: 28px;
    --fs-2xl: 24px;  --lh-2xl: 32px;
    --fs-3xl: 30px;  --lh-3xl: 38px;
    --fs-4xl: 36px;  --lh-4xl: 44px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --tracking-tight: -0.01em;
    --tracking-caps: 0.06em;

    /* Spacing on a 4 px grid (numbered like Tailwind: --sp-N = N x 4 px). */
    --sp-0: 0;
    --sp-px: 1px;
    --sp-0-5: 2px;
    --sp-1: 4px;
    --sp-1-5: 6px;
    --sp-2: 8px;
    --sp-2-5: 10px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-14: 56px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* Radii. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* Motion: two durations, one curve; off under prefers-reduced-motion. */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layers. Modal dialogs use the browser top layer (<dialog>). */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 20;
    --z-topbar: 50;
    --z-sidebar: 80;
    --z-tabbar: 90;
    --z-drawer-backdrop: 900;
    --z-drawer: 1000;
    --z-popover: 1050;
    --z-notif-panel: 1100;
    --z-modal-backdrop: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
    --z-tooltip: 1500;
    --z-progress: 1600;

    /* Breakpoints (for reference and scripts; media queries use the same
       literal values): sm 480, md 768, lg 1024, xl 1440. */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;

    /* Touch target minimum. */
    --target: 44px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
    }
}

/* ======================= Legacy aliases =======================
 * Names the pre-D2 stylesheets (style.css, components.css, automation.css,
 * page <style> blocks, Tailwind village-* classes) use. They resolve to the
 * semantic tokens above, so the old page bodies follow the theme until
 * D5-D7 rebuild them. New code uses the semantic names. */
:root {
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface);
    --bg-tertiary: var(--raised);
    --bg-card: var(--surface);
    --bg-card-hover: var(--raised);
    --bg-elevated: var(--raised);
    --bg-input: var(--sunken);
    --border-light: color-mix(in srgb, var(--border) 70%, var(--border-strong));

    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --text-secondary-strong: color-mix(in srgb, var(--text) 55%, var(--text-muted));

    --accent-active: var(--accent-pressed);
    --accent-dim: var(--accent-soft);
    --accent-ring: var(--focus);

    --green: var(--success);
    --green-dim: var(--success-soft);
    --yellow: var(--warning);
    --yellow-dim: var(--warning-soft);
    --red: var(--danger);
    --red-dim: var(--danger-soft);
    --blue: var(--river);
    --blue-dim: var(--info-soft);
    --purple: #a78bfa;
    --purple-dim: rgba(167, 139, 250, 0.15);

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-xs: 4px;
    --radius: var(--radius-md);
    --radius-xl: 20px;

    --shadow-xs: var(--shadow-1);
    --shadow-sm: var(--shadow-1);
    --shadow: var(--shadow-2);
    --shadow-md: var(--shadow-2);
    --shadow-lg: var(--shadow-3);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 24px var(--accent-soft);

    --transition: var(--dur-fast) var(--ease-out);
    --transition-slow: var(--dur) var(--ease-out);
    --transition-spring: var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1);

    --z-header: var(--z-topbar);
    --z-sidebar-toggle: 45;
    --z-bottom-nav: var(--z-tabbar);
}
[data-theme="light"] {
    --purple: #6b4fc4;
    --purple-dim: rgba(107, 79, 196, 0.10);
}