/*
 * app/static/css/_tokens.css
 *
 * Foundation design tokens for the streaming chat UI polish.
 * Loaded first in index.html so every downstream stylesheet can consume
 * these custom properties.
 *
 * Phase 1 of the streaming text polish project. Tokens are defined here
 * but not yet consumed by other stylesheets — Phase 2 begins the migration.
 *
 * Spec: docs/superpowers/specs/2026-05-02-streaming-text-polish-design.md
 */

:root {
    /* ===== Color tokens ===== */
    /* Warm-dark palette with single signature gold accent. */

    --ink-1: #14120e;       /* page background */
    --ink-2: #1a1814;       /* surface */
    --ink-3: #221f19;       /* surface-2 (hover, code interior) */
    --ink-4: #2a2620;       /* raised surface (user bubble, sidebar selected) */
    --ink-deep: #0e0d0a;    /* deepest — sidebar bg, code block interior. Darker than --ink-1; not part of the 1..4 ascending scale. */

    --paper-1: #f5efe1;     /* strongest text (headings) */
    --paper-2: #ebe4d0;     /* body text */
    --paper-3: rgba(235, 228, 208, 0.62);   /* secondary text */
    --paper-4: rgba(235, 228, 208, 0.42);   /* tertiary text */
    --paper-5: rgba(235, 228, 208, 0.22);   /* quaternary */
    --paper-faint: rgba(235, 228, 208, 0.08);  /* faintest hint */

    --gold-1: #e8c07a;      /* bright accent (hover, highlight) */
    --gold-2: #d4b075;      /* primary accent (links, copy button, list markers) */
    --gold-3: #b89860;      /* deep accent (gradients, deep states) */
    --gold-soft: rgba(212, 176, 117, 0.14);   /* accent fill */
    --gold-line: rgba(212, 176, 117, 0.32);   /* accent border */

    --hairline: rgba(255, 255, 255, 0.06);    /* default divider */
    --hairline-2: rgba(255, 255, 255, 0.12);  /* stronger divider */

    /* ===== Type tokens ===== */
    /* (light overrides for color tokens live below, after the type/spacing
     * blocks — keeps the dark palette + scale tokens together.) */

    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    --font-serif: 'Newsreader', Georgia, serif;

    --text-xs: 12px;
    --text-xs-lh: 1.5;

    --text-sm: 13px;
    --text-sm-lh: 1.55;

    --text-base: 15.5px;        /* prose body — chat response paragraphs */
    --text-base-lh: 1.72;

    --text-md: 16px;            /* UI body — composer input, message bubbles */
    --text-md-lh: 1.65;

    --text-lg: 18px;
    --text-lg-lh: 1.35;

    --text-xl: 22px;
    --text-xl-lh: 1.2;

    /* ===== Spacing tokens (8px base scale) ===== */

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 22px;
    --s-6: 28px;
    --s-7: 36px;
    --s-8: 48px;

    /* ===== Motion tokens ===== */

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
}

/* ============================================================
   Light theme overrides — flip surfaces ↔ text and shift gold
   into AA range on cream. Hairlines invert from white-on-dark to
   dark-on-cream. Aligns with the warm cream palette in
   design-tokens.css (#faf9f5 / #f3efe7 / #1f1d1a).
   ============================================================ */
[data-theme="light"] {
    /* Surfaces — was dark inks → now cream papers. Mirrors the
       dark scale: 1=page, 2=surface, 3=surface-2, 4=raised, deep=sidebar. */
    --ink-1: #faf9f5;        /* page background — matches --bg-primary */
    --ink-2: #f7f3ea;        /* surface — between primary and tertiary */
    --ink-3: #f3efe7;        /* surface-2 — matches --bg-tertiary */
    --ink-4: #ebe4d0;        /* raised surface — warm beige */
    --ink-deep: #f0ece4;     /* sidebar bg — slightly darker than page for separation */

    /* Text — was warm cream → now warm near-black hierarchy. */
    --paper-1: #1f1d1a;      /* strongest text — matches --text-primary */
    --paper-2: #2a2620;      /* body text */
    --paper-3: rgba(40, 30, 15, 0.72);   /* secondary text */
    --paper-4: rgba(40, 30, 15, 0.55);   /* tertiary */
    --paper-5: rgba(40, 30, 15, 0.35);   /* quaternary */
    --paper-faint: rgba(40, 30, 15, 0.10); /* faintest hint */

    /* Gold — shifted deeper for AA contrast on cream (#faf9f5).
       Original dark-mode gold (#d4b075) sits at ~2.7:1 on cream — fails AA.
       Deeper variants put the primary accent at 4.5:1+. */
    --gold-1: #a5874f;       /* bright accent (hover) */
    --gold-2: #8c702f;       /* primary accent (links, copy) — AA on cream */
    --gold-3: #735c20;       /* deep accent (gradients) */
    --gold-soft: rgba(140, 112, 47, 0.12);
    --gold-line: rgba(140, 112, 47, 0.32);

    /* Hairlines — invert white-on-dark to dark-on-cream. */
    --hairline:   rgba(40, 30, 15, 0.08);
    --hairline-2: rgba(40, 30, 15, 0.14);
}