/*
 * burr-theme.css — shared light/dark design tokens for every burrdb page
 * (anim, viz, builder, exploded, maker).
 *
 * `:root` holds the light theme; `:root[data-theme="dark"]` overrides it.
 * burr-theme.js sets the data-theme attribute before first paint and keeps
 * it in sync with the ?theme= URL param, localStorage, and the OS setting.
 *
 * Tokens whose values are read from JS (Three.js materials, inline SVG
 * attributes, canvas sprites) must stay *opaque hex* colors — THREE.Color
 * and friends can't parse rgba()/color-mix(). Those are marked "JS".
 */

:root {
    color-scheme: light;

    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Surfaces */
    --bg: #f4f6fa;                             /* JS: Three.js clear color */
    --bg-accent: #ffffff;                      /* page chrome: topbar, rails */
    --panel: rgba(255, 255, 255, 0.88);        /* frosted floating panels */
    --panel-strong: rgba(255, 255, 255, 0.95);
    --panel-solid: #ffffff;                    /* tooltips, dialogs, menus */
    --panel-border: rgba(32, 41, 57, 0.14);
    --field: #ffffff;                          /* inputs, buttons */
    --field-strong: #eef2f7;                   /* hover */
    --line: #d0d7e2;                           /* control borders */
    --line-soft: #e4e9f0;                      /* dividers */

    /* Text */
    --text: #18202f;
    --muted: #667085;
    --faint: #98a2b3;

    /* Accent */
    --accent: #0b83d8;                         /* JS */
    --accent-strong: #0a6cb3;
    --accent-soft: #dbeafe;                    /* selected backgrounds */
    --accent-contrast: #ffffff;                /* text on accent */
    --accent-text: #085a92;                    /* small text on accent-soft */

    /* Chromatic (badges, status triads: color = text/border, -soft = bg) */
    --green: #178a4c;
    --green-soft: rgba(23, 138, 76, 0.12);
    --red: #c62828;
    --red-soft: rgba(198, 40, 40, 0.10);
    --orange: #b26a00;
    --orange-soft: rgba(178, 106, 0, 0.12);
    --teal: #0f766e;
    --teal-soft: rgba(15, 118, 110, 0.10);
    --purple: #8a4bbf;

    /* Puzzle drawing (SVG + Three.js) */
    --edge: #1a1a2e;                           /* JS: piece outline ink */
    --axis: #8e99ab;                           /* JS */
    --label: #8e97a8;
    --void-edge: #64748b;                      /* JS */
    --void-fill: rgba(100, 116, 139, 0.08);
    --grid-major: #c9d0dc;                     /* JS: maker floor grid */
    --grid-minor: #e3e8ef;                     /* JS */
    --scene-ground: #cdd3dd;                   /* JS: hemisphere light ground */

    /* Depth */
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.15);
    --shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.08);
    --scrim: rgba(15, 23, 42, 0.45);           /* dialog backdrops */
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — neutral charcoal (anim/maker lineage, not slate) */
    --bg: #171717;
    --bg-accent: #202020;
    --panel: rgba(24, 24, 24, 0.88);
    --panel-strong: rgba(32, 32, 32, 0.95);
    --panel-solid: #242424;
    --panel-border: rgba(255, 255, 255, 0.10);
    --field: #2e2e2e;
    --field-strong: #3a3a3a;
    --line: #454545;
    --line-soft: #333333;

    --text: #f2f2f2;
    --muted: #a7a7a7;
    --faint: #7a7a7a;

    --accent: #159cf4;
    --accent-strong: #0b83d8;
    --accent-soft: #163c55;
    --accent-contrast: #ffffff;
    --accent-text: #7cc4ff;

    --green: #24c774;
    --green-soft: rgba(36, 199, 116, 0.16);
    --red: #ff5748;
    --red-soft: rgba(255, 87, 72, 0.16);
    --orange: #f4a21c;
    --orange-soft: rgba(244, 162, 28, 0.14);
    --teal: #19bca9;
    --teal-soft: rgba(25, 188, 169, 0.14);
    --purple: #a75ad1;

    --edge: #d7deeb;
    --axis: #a0a7b1;
    --label: #9aa1ab;
    --void-edge: #9aa1ab;
    --void-fill: rgba(255, 255, 255, 0.07);
    --grid-major: #555555;
    --grid-minor: #343434;
    --scene-ground: #1d1d1d;

    --shadow: 0 18px 54px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.35);
    --scrim: rgba(0, 0, 0, 0.6);
}

/* Shared page-wide defaults */
:root {
    accent-color: var(--accent);
}

::selection {
    background: var(--accent-soft);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Theme toggle — one look on every page. Icon shows the theme you'd
   switch TO: moon in light mode, sun in dark. */
.theme-toggle {
    appearance: none;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--field);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.theme-toggle:hover {
    background: var(--field-strong);
    color: var(--text);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }