/* Hallmark · tokens · theme: Almanac
 * axes: light paper · roman-serif display · warm accent
 * The single source of colour, type, space, and motion for this project.
 * Page CSS references these by name — never inline a raw value.
 */

:root {
    /* ---- Paper and ink ------------------------------------------------- */
    --color-paper:        oklch(96.5% 0.011 80);
    --color-paper-2:      oklch(93.5% 0.013 80);
    --color-paper-3:      oklch(90%   0.014 78);
    --color-rule:         oklch(84%   0.012 78);
    --color-rule-firm:    oklch(70%   0.016 76);   /* decorative frames and rules */
    --color-field-border: oklch(58%   0.014 74);   /* 3:1 — interactive boundaries */
    --color-neutral:      oklch(50%   0.012 74);   /* 4.5:1 on paper and paper-2 */
    --color-muted:        oklch(43%   0.012 68);
    --color-ink:          oklch(23%   0.014 62);
    --color-ink-strong:   oklch(15%   0.016 58);

    /* ---- Accent — oxblood. Under 3% of any viewport. ------------------- */
    --color-accent:       oklch(45%   0.145 25);
    --color-accent-hover: oklch(38%   0.150 25);
    --color-accent-ink:   oklch(97%   0.008 30);
    --color-accent-soft:  oklch(93%   0.028 28);
    --color-focus:        oklch(52%   0.170 25);

    /* ---- Score bands — earth ramp at matched lightness ----------------- */
    --color-band-great:   oklch(48%   0.105 148);
    --color-band-good:    oklch(52%   0.100 108);
    --color-band-fair:    oklch(58%   0.115 68);
    --color-band-weak:    oklch(50%   0.135 32);

    /* ---- Wheel segments — muted earth ramp, read by scripts/login-wheel.js */
    --color-wheel-1: oklch(78% 0.060 78);
    --color-wheel-2: oklch(70% 0.075 48);
    --color-wheel-3: oklch(74% 0.065 118);
    --color-wheel-4: oklch(66% 0.070 28);
    --color-wheel-5: oklch(80% 0.050 98);
    --color-wheel-6: oklch(68% 0.060 148);

    /* ---- Overlay / shadow modifiers ------------------------------------ */
    --color-scrim:        oklch(15% 0.016 58 / 0.72);
    --shadow-whisper:     0 1px 2px oklch(20% 0.014 62 / 0.07);
    --shadow-raised:      0 6px 20px oklch(20% 0.014 62 / 0.12);

    /* ---- Type ---------------------------------------------------------- */
    --font-display: "Newsreader", ui-serif, Charter, Georgia, serif;
    --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --text-2xs:     0.6875rem;  /* 11px — micro-labels only, never body */
    --text-xs:      0.8125rem;  /* 13px */
    --text-sm:      0.875rem;   /* 14px */
    --text-base:    1rem;       /* 16px — body floor */
    --text-md:      1.125rem;   /* 18px */
    --text-lg:      1.375rem;   /* 22px */
    --text-xl:      1.75rem;    /* 28px */
    --text-2xl:     2.25rem;    /* 36px */
    --text-3xl:     2.875rem;   /* 46px */
    --text-display:   clamp(2.25rem, 4vw + 1rem, 3.75rem);
    --text-display-s: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);

    --tracking-display: -0.02em;
    --tracking-label:    0.10em;

    /* ---- Space — 4pt scale, nine steps ---------------------------------- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;

    /* ---- Rules and radii ------------------------------------------------ */
    --rule-hair:  1px;
    --rule-firm:  2px;
    --radius-input: 2px;
    --radius-sm:    2px;
    --radius-md:    3px;

    /* ---- Motion --------------------------------------------------------- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long:  420ms;

    /* ---- Depth ---------------------------------------------------------- */
    --z-base:     1;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
    --z-toast:    500;
    --z-tooltip:  600;

    /* ---- Measure -------------------------------------------------------- */
    --measure:      65ch;
    --measure-tight: 46ch;
    --page-max:     72rem;
}
