/*
 * static/css/tokens.css — :root and [data-theme="light"] custom properties, copied value for value from the legacy index.html. A fork's /brand/theme.css overrides tokens only and loads after this file.
 *
 * Owner: WP A-13 (Phase 1), B-13 (Phase 2). Spec: FA §16.1; FR §10.1.
 * Every selector is defined once, in one file (I7; T-CSS checks the critical ones).
 *
 * The legacy file defined each theme twice (the original tokens, then the "visual redesign"
 * layer that overrode some of them by source order). The values below are the effective ones,
 * so the result is pixel-identical: the redesign values win where both existed.
 * Dark is the default (:root); light is applied with data-theme="light" on <html>.
 */

:root {
    color-scheme: dark;
    /* surfaces (layered black for depth) */
    --bg-color: #09090b;
    --surface-1: #0f0f12;            /* sidebar */
    --sidebar-bg: #0d0d10;
    --surface-2: #121216;            /* chat area / cards */
    --chat-bg: #0b0b0d;
    --input-bg: #17171c;
    --code-bg: #0d0d0f;
    --card-bg: #16161b;
    /* text */
    --text-color: #f5f4f1;
    --text-dim: #c8c5bf;
    --text-muted: #96949d;
    --text-faint: #6d6c75;
    --meta-text: #8f8f9c;
    /* borders / controls */
    --border-color: #26262d;
    --border-strong: #34343d;
    --muted-control: #3d3d45;
    --focus-border: var(--gold-accent);
    /* thinking */
    --think-bg: #18140b;
    --think-text: #e6d5a4;
    --think-border: #3a3320;
    /* accents: gold-forward */
    --gold-accent: #d6bd8d;
    --gold-accent-hover: #e5cea0;
    --gold-glow: rgba(214, 189, 141, 0.18);
    --gold-soft: rgba(214, 189, 141, 0.085);
    --gold-on: #1a1408;
    /* status / indicator */
    --indicator-text: #d8c79b;
    --link-text: #e3d4a8;
    --file-pill-token: #cdb98f;
    --danger-text: #ff8a80;
    --danger-soft: #ffb4ab;
    --danger-rich: #ff5a4f;
    --danger-rich-soft: rgba(255, 90, 79, 0.12);
    --danger-fill: #d4372d;          /* filled danger button: white text 4.8:1 (WCAG AA) */
    --warning-bg: rgba(207, 185, 145, 0.08);
    --warning-border: rgba(207, 185, 145, 0.28);
    --warning-text: #e6d5a4;
    --code-inline-text: #f1f3f4;
    --copy-btn-bg-hover: #30303a;
    --spinner-track: rgba(207, 185, 145, 0.25);
    --drag-tint: rgba(207, 185, 145, 0.06);
    --overlay: rgba(0, 0, 0, 0.62);
    --overlay-strong: rgba(0, 0, 0, 0.74);
    --shadow-soft: rgba(0, 0, 0, 0.32);
    /* media viewer scrim: dark in both themes so captions and images read (artifacts.css lightbox) */
    --lightbox-scrim: rgba(10, 10, 12, 0.86);
    /* halo under the glass nav's title, so it stays readable over a card of the other brightness */
    --nav-text-halo: 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.5);
    /* chevron for selects drawn with appearance: none (modals.css, artifacts.css) */
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23c8c5bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* type / shape / space / elevation */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 18px 50px rgba(0, 0, 0, 0.32);
    --elev-3: 0 30px 90px rgba(0, 0, 0, 0.52);
    --ring: 0 0 0 3px var(--gold-glow);

    /* artifact cards and stage (FR §10.1; consumed by artifacts.css) */
    --card-border: var(--border-color);
    --card-bar-bg: var(--surface-1);
    --card-fg-muted: var(--text-muted);
    --canvas-light: #fff;
    --canvas-dark: #1b1b1b;
    --checker-a: #2a2a30;
    --checker-b: #1f1f24;
    --badge-bg: var(--gold-soft);
    --badge-fg: var(--gold-accent);
    --stage-bg: var(--surface-2);
    --stage-divider: var(--border-strong);

    /* stacking order (I1, UX-11): nav < stage (pane or sheet) < files pane < lightbox < system notices < dialogs.
       The files pane is a modal overlay, so it opens above the stage (X36); its previews' lightbox and
       menus, notices and confirm dialogs stay above it. */
    --z-nav: 30;
    --z-stage: 40;
    --z-files-pane: 42;
    --z-lightbox: 45;
    --z-system-notice: 50;
    --z-dialog: 180;

    /* brand images: main.js sets them from site.json (url("/brand/…")); none until then */
    --brand-home-image: none;
    --brand-auth-image: none;
    --brand-chat-image: none;
    --brand-avatar-image: none;
}

/* Light theme: warm off-white surfaces, dark text. */
[data-theme="light"] {
    color-scheme: light;
    --bg-color: #f5f3ee;
    --surface-1: #ffffff;
    --sidebar-bg: #f7f5f0;
    --surface-2: #ffffff;
    --chat-bg: #fbfaf7;
    --input-bg: #f6f3ed;
    --code-bg: #f4f3ee;
    --card-bg: #f2efe8;
    --text-color: #1c1b18;
    --text-dim: #45423c;
    --text-muted: #706d66;
    --text-faint: #98948b;
    --meta-text: #6b6960;
    --border-color: #dfdcd4;
    --border-strong: #cbc6bb;
    --muted-control: #c7c2b6;
    --focus-border: var(--gold-accent);
    --think-bg: #fbf5e4;
    --think-text: #6b5a1e;
    --think-border: #e9dcb5;
    --gold-accent: #82641e;
    --gold-accent-hover: #674d12;
    --gold-glow: rgba(130, 100, 30, 0.16);
    --gold-soft: rgba(130, 100, 30, 0.07);
    --gold-on: #ffffff;
    --indicator-text: #7a5f12;
    --link-text: #7a5f12;
    --file-pill-token: #8a6d1f;
    --danger-text: #c5221f;
    --danger-soft: #c5221f;
    --danger-rich: #b3261e;
    --danger-rich-soft: rgba(179, 38, 30, 0.10);
    --danger-fill: #b3261e;
    --warning-bg: rgba(138, 109, 31, 0.08);
    --warning-border: rgba(138, 109, 31, 0.26);
    --warning-text: #7a5f12;
    --code-inline-text: #1d1c19;
    --copy-btn-bg-hover: #e4e0d6;
    --spinner-track: rgba(138, 109, 31, 0.25);
    --drag-tint: rgba(138, 109, 31, 0.06);
    --overlay: rgba(40, 36, 28, 0.32);
    --overlay-strong: rgba(40, 36, 28, 0.42);
    --elev-1: 0 1px 2px rgba(60, 52, 34, 0.08);
    --nav-text-halo: 0 0 2px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.55);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2345423c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ring: 0 0 0 3px var(--gold-glow);
    /* --shadow-soft, --elev-2 and --elev-3 are deliberately not redefined: in the legacy file the
       later dark :root block won over the earlier light values by source order (equal
       specificity), so the light theme really used the :root shadows. Kept for parity. */

    /* artifact cards and stage (FR §10.1) */
    --checker-a: #e9e6df;
    --checker-b: #f6f4ef;
}