/**
 * SlipSaver design tokens — single source of truth for colour, type, spacing,
 * radius, elevation, and motion.
 *
 * Phase 1a: this file is created and loaded; consumers still use styles.css /
 * Tailwind utilities until 1b migration. Do not add ad-hoc hex/px elsewhere
 * after 1b — re-point them here.
 *
 * Colour rules (enforce ruthlessly):
 *   --claim  → claimable money figures only
 *   --input  → needs user input / money waiting
 *   --none   → not claimable (fact, not failure)
 *   --loss   → actionable claim loss only (+ what to do)
 *   Brand greens → chrome, buttons, nav — never --claim
 */

/* Display: Archivo · UI: General Sans · Data: IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400;500;600;700&display=swap');

:root {
    /* ——— Colour: brand (structural, desaturated) ——— */
    --brand-900: #78350f;
    --brand-800: #92400e;
    --brand-600: #b45309;

    /* ——— Colour: paper field ——— */
    --paper: #f6f8f6;
    --card: #ffffff;
    --rule: #e3e8e4;
    --ink: #14201b;
    --ink-muted: #5c6b63;

    /* ——— Colour: status (SCARCE) ——— */
    --claim: #059a5b;
    --status-input: #c97a16; /* "input" reserved in some contexts; alias below */
    --none: #8a968f;
    --loss: #a93b2b;

    /* Brief name --input maps here (avoid clashing with form controls in prose) */
    --input: var(--status-input);

    /* Focus ring (keyboard) */
    --focus-ring: var(--brand-600);
    --focus-ring-offset: 2px;
    --focus-ring-width: 2px;

    /* ——— Typography families ——— */
    --font-display: 'Archivo', system-ui, sans-serif;
    --font-ui: 'General Sans', system-ui, sans-serif;
    --font-data: 'IBM Plex Mono', ui-monospace, monospace;

    /* ——— Type scale (rem) — sentence case; no ALL-CAPS headings ——— */
    --text-xs: 0.75rem;    /* 12px — captions, meta */
    --text-sm: 0.875rem;   /* 14px — secondary UI */
    --text-base: 1rem;     /* 16px — body */
    --text-md: 1.125rem;   /* 18px — emphasis body */
    --text-lg: 1.25rem;    /* 20px — section labels */
    --text-xl: 1.5rem;     /* 24px — screen titles */
    --text-2xl: 1.875rem;  /* 30px — hero display */
    --text-3xl: 2.25rem;   /* 36px — money-found hero */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-display: -0.02em;
    --tracking-normal: 0;

    /* ——— Spacing scale ——— */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.25rem;   /* 20 */
    --space-6: 1.5rem;    /* 24 */
    --space-8: 2rem;      /* 32 */
    --space-10: 2.5rem;   /* 40 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */

    /* Touch target floor */
    --touch-min: 2.75rem; /* 44px */

    /* Layout (product shell) */
    --sidebar-width: 16.25rem;      /* 260px */
    --sidebar-width-tablet: 13.75rem; /* 220px */
    --content-max: 60rem;           /* 960px */
    --content-max-wide: 68.75rem;   /* 1100px */

    /* ——— Radius ——— */
    --radius-sm: 0.375rem;  /* 6 */
    --radius-md: 0.5rem;    /* 8 */
    --radius-lg: 0.75rem;   /* 12 */
    --radius-xl: 1rem;      /* 16 */
    --radius-2xl: 1.25rem;  /* 20 */
    --radius-pill: 999px;

    /* ——— Elevation ——— */
    --shadow-sm: 0 1px 2px rgba(20, 32, 27, 0.06);
    --shadow-md: 0 4px 12px rgba(20, 32, 27, 0.08);
    --shadow-lg: 0 12px 32px rgba(20, 32, 27, 0.12);
    --shadow-overlay: 0 25px 50px -12px rgba(20, 32, 27, 0.25);

    /* ——— Motion (functional only) ——— */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --transition-colors: color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
    --transition-transform: transform var(--duration-fast) var(--ease-out);
    --transition-opacity: opacity var(--duration-fast) var(--ease-out);
}

/*
 * Single-owner rule (2026-07-20): the theme CHROME variables
 * (--primary/--primary-hover/--secondary/--accent/--bg/--bg-elevated/--card/
 * --card-border/--text/--text-muted/--input-bg/--input-text/--header-bg/
 * --shadow/--sidebar-hover) are owned SOLELY by styles.css, for both the
 * light (default) and dark themes.
 *
 * tokens.css used to also declare them as an inert "bridge", but styles.css
 * loads after this file and overrides every one at equal-or-higher specificity
 * — so those declarations were dead code whose only effect was risk: a change
 * to styles.css's load order or cache-version would have silently flipped all
 * chrome to the desaturated brand palette. They are removed so there is exactly
 * one source of truth for the live look.
 *
 * The brand/claim/none/loss + paper/ink/rule PRIMITIVES above stay here as the
 * palette for the green split (1b step 2), which is where styles.css gets
 * rewired to consume them. Until then this file defines primitives only.
 */

html[data-theme='light'] {
    color-scheme: light;
}

/* Data figures: always tabular mono when class is applied (1b wires money) */
.font-data,
[data-money] {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

/* Reduced motion — no decorative animation; snap state changes */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-normal: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}