/* ==========================================================================
   scottliu.com design suite - tokens.css
   The single source of truth for palette, type, spacing, shape, motion, depth.
   Load this FIRST, before base.css and components.css. See DESIGN.md for usage.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Loaded from Google Fonts for now; the long-term plan is to self-host the
   woff2 files on static.scottliu.com/fonts/ (see DESIGN.md "Fonts"). Roles:
     Montserrat        headings, labels, nav, UI chrome        (--font-head)
     Source Serif Pro  body copy, paragraphs, most reading     (--font-body)
     Dancing Script    the "Scott Liu" identity wordmark only  (--font-brand)
     Source Code Pro   code blocks, inline code, monospace UI  (--font-mono)
   ------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Montserrat:wght@400;600;700&family=Source+Code+Pro:wght@400;600&family=Source+Serif+Pro:wght@400;600;700&display=swap");

:root {
    /* --- Surfaces / paper ------------------------------------------------ */
    --paper: #faf7f1;        /* page background */
    --paper-raised: #ffffff; /* cards, panels, inputs, anything lifted */
    --paper-sunken: #f1ece1; /* insets, track fills, table headers, code bg */

    /* --- Ink / text ------------------------------------------------------ */
    --ink: #1f1c18;       /* primary text + headings */
    --ink-soft: #5b554c;  /* muted/secondary text, labels, captions */
    --hairline: #ddd5c7;  /* all borders and dividers */

    /* --- Accent ---------------------------------------------------------- */
    /* Suite default is a plain token (forest green). Sites that need an
       animated/alternate accent (e.g. music's classical<->pop cross-fade)
       redefine --accent locally in their own app.css - NOT here. */
    --accent: #2f5d3e;
    --accent-weak: rgba(47, 93, 62, 0.12); /* hover fills, focus ring, tints */

    /* --- Semantic feedback ----------------------------------------------- */
    --success: #2f7d4f;
    --warn: #9c6b2b;
    --danger: #9c2b2b;
    /* Legacy aliases (music's quiz uses correct/wrong semantics). Prefer the
       --success / --danger names in new work. */
    --correct: var(--success);
    --wrong: var(--danger);

    /* --- Typography: families -------------------------------------------- */
    --font-head: "Montserrat", system-ui, -apple-system, sans-serif;
    --font-body: "Source Serif Pro", Georgia, "Times New Roman", serif;
    --font-brand: "Dancing Script", "Segoe Script", cursive;
    --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;

    /* --- Typography: scale ----------------------------------------------- */
    /* Body base is 18px (set in base.css); everything below is rem-relative.
       Use these tokens instead of hand-picking px/rem sizes. */
    --text-2xs: 0.7rem;   /* micro badges */
    --text-xs: 0.78rem;   /* uppercase field labels, meta */
    --text-sm: 0.85rem;   /* small buttons, captions, hints */
    --text-md: 0.95rem;   /* section heads, dense UI text */
    --text-base: 1rem;    /* default body / controls */
    --text-lg: 1.15rem;   /* lede, emphasized body */
    --text-xl: 1.3rem;    /* card titles, small headings */
    --text-2xl: 1.6rem;   /* h2 */
    --text-3xl: 2rem;     /* h1 */
    --text-display: clamp(2rem, 5vw, 3.25rem); /* hero display */

    --leading-body: 1.55;
    --leading-tight: 1.25;

    /* --- Spacing scale --------------------------------------------------- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;

    /* --- Shape ----------------------------------------------------------- */
    --radius: 10px;        /* default: cards, inputs, buttons */
    --radius-sm: 6px;      /* inline code, tight chips, menu items */
    --radius-pill: 999px;  /* badges, status pills, toggles */

    /* --- Depth ----------------------------------------------------------- */
    --shadow-soft: 0 1px 2px rgba(31, 28, 24, 0.05), 0 6px 20px rgba(31, 28, 24, 0.06);
    --shadow-pop: 0 4px 12px rgba(31, 28, 24, 0.1), 0 12px 40px rgba(31, 28, 24, 0.14);
    --focus-ring: 0 0 0 3px var(--accent-weak);

    /* --- Motion ---------------------------------------------------------- */
    --dur-fast: 180ms;
    --dur-base: 300ms;
    --dur-accent: 500ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Z-index scale --------------------------------------------------- */
    /* Use these instead of ad-hoc numbers so overlays stack predictably. */
    --z-base: 1;
    --z-dropdown: 100;  /* popovers, menus, autocomplete */
    --z-sticky: 200;    /* sticky headers/toolbars */
    --z-overlay: 900;   /* modal backdrops, full-screen scrims */
    --z-modal: 1000;    /* modal content */
    --z-toast: 1100;    /* toasts sit above everything */

    /* --- Layout ---------------------------------------------------------- */
    --page-max: 880px;   /* default reading column; override per-site if needed */
    --measure: 34rem;     /* ideal prose line length; rem avoids ch font-loading race */
}

/* Respect users who ask for less motion - kills all suite animation. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}