/*
 * Design Tokens
 *
 * Single source of truth for all design decisions as CSS custom properties.
 * Created but not loaded — wired into base.html when Bootstrap is replaced (COR-185).
 */

:root {
    /* ===================================================================
   * Fluid Type Scale (Utopia)
   *
   * @link https://utopia.fyi/type/calculator?c=320,16,1.2,1200,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
   * 320px/16px (1.2) → 1200px/18px (1.25), steps -2..5
   * =================================================================== */
    --step--2: clamp(0.6944rem, calc(0.6852rem + 0.0465vw), 0.72rem);
    --step--1: clamp(0.8333rem, calc(0.8091rem + 0.1212vw), 0.9rem);
    --step-0: clamp(1rem, calc(0.9545rem + 0.2273vw), 1.125rem); /* base size */
    --step-1: clamp(1.2rem, calc(1.125rem + 0.375vw), 1.4063rem);
    --step-2: clamp(1.44rem, calc(1.3244rem + 0.5778vw), 1.7578rem);
    --step-3: clamp(1.728rem, calc(1.5574rem + 0.8532vw), 2.1973rem);
    --step-4: clamp(2.0736rem, calc(1.8289rem + 1.2236vw), 2.7466rem);
    --step-5: clamp(2.4883rem, calc(2.1447rem + 1.718vw), 3.4332rem);

    /* ===================================================================
   * Fluid Space Scale (Utopia)
   *
   * @link https://utopia.fyi/space/calculator?c=320,16,1.2,1200,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
   * =================================================================== */
    --space-3xs: clamp(0.25rem, calc(0.2386rem + 0.0568vw), 0.2813rem);
    --space-2xs: clamp(0.5rem, calc(0.4773rem + 0.1136vw), 0.5625rem);
    --space-xs: clamp(0.75rem, calc(0.7159rem + 0.1705vw), 0.8438rem);
    --space-s: clamp(1rem, calc(0.9545rem + 0.2273vw), 1.125rem);
    --space-m: clamp(1.5rem, calc(1.4318rem + 0.3409vw), 1.6875rem);
    --space-l: clamp(2rem, calc(1.9091rem + 0.4545vw), 2.25rem);
    --space-xl: clamp(3rem, calc(2.8636rem + 0.6818vw), 3.375rem);
    --space-2xl: clamp(4rem, calc(3.8182rem + 0.9091vw), 4.5rem);
    --space-3xl: clamp(6rem, calc(5.7273rem + 1.3636vw), 6.75rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, calc(0.1364rem + 0.5682vw), 0.5625rem);
    --space-2xs-xs: clamp(0.5rem, calc(0.375rem + 0.625vw), 0.8438rem);
    --space-xs-s: clamp(0.75rem, calc(0.6136rem + 0.6818vw), 1.125rem);
    --space-s-m: clamp(1rem, calc(0.75rem + 1.25vw), 1.6875rem);
    --space-m-l: clamp(1.5rem, calc(1.2273rem + 1.3636vw), 2.25rem);
    --space-l-xl: clamp(2rem, calc(1.5rem + 2.5vw), 3.375rem);
    --space-xl-2xl: clamp(3rem, calc(2.4545rem + 2.7273vw), 4.5rem);
    --space-2xl-3xl: clamp(4rem, calc(3rem + 5vw), 6.75rem);

    /* Custom pairs */
    --space-s-l: clamp(1rem, calc(0.5455rem + 2.2727vw), 2.25rem);

    /* ===================================================================
   * Typography
   * =================================================================== */
    --font-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

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

    /* ===================================================================
   * Colors — Base Palette (HSL)
   *
   * Blue anchored on brand #183b78 ≈ hsl(216 67% 28%).
   * Gray warm-tinted to match existing #f7f7f2 ivory.
   * Only steps referenced by semantic tokens are defined.
   * =================================================================== */

    /* Blue — full scale */
    --color-blue-50: hsl(214 100% 97%);
    --color-blue-100: hsl(214 95% 93%);
    --color-blue-200: hsl(214 86% 84%);
    --color-blue-300: hsl(214 80% 72%);
    --color-blue-400: hsl(215 72% 58%);
    --color-blue-500: hsl(216 72% 47%);
    --color-blue-600: hsl(216 72% 39%);
    --color-blue-700: hsl(216 70% 33%);
    --color-blue-800: hsl(216 67% 28%); /* brand anchor #183b78 */
    --color-blue-900: hsl(216 65% 23%);
    --color-blue-950: hsl(217 63% 15%);

    /* Gray — lean, warm-tinted */
    --color-gray-50: hsl(60 18% 96%); /* ≈ #f7f7f2 */
    --color-gray-100: hsl(55 12% 91%);
    --color-gray-200: hsl(50 8% 82%);
    --color-gray-400: hsl(45 5% 56%);
    --color-gray-600: hsl(40 4% 38%);
    --color-gray-900: hsl(30 6% 15%);

    /* Red — lean */
    --color-red-50: hsl(0 86% 97%);
    --color-red-200: hsl(0 72% 82%);
    --color-red-600: hsl(0 72% 45%);
    --color-red-700: hsl(0 75% 38%);

    /* Amber — lean */
    --color-amber-50: hsl(48 100% 96%);
    --color-amber-100: hsl(45 97% 89%);
    --color-amber-200: hsl(43 96% 76%);
    --color-amber-500: hsl(38 92% 50%);
    --color-amber-600: hsl(32 95% 44%);

    /* Green — lean */
    --color-green-50: hsl(142 76% 96%);
    --color-green-100: hsl(141 84% 89%);
    --color-green-200: hsl(141 79% 74%);
    --color-green-600: hsl(142 64% 34%);
    --color-green-700: hsl(142 68% 28%);

    /* ===================================================================
   * Colors — Semantic Tokens
   *
   * Each semantic color follows a systematic template.
   * ────────────────────────────────────────────────────────
   * Full template per color:
   *   --color-{name}-fill-muted      Light background (alerts, badges)
   *   --color-{name}-fill-accent     Medium background (hover states)
   *   --color-{name}-fill-vivid      Full color (buttons, active states)
   *   --color-{name}-border-muted    Subtle border
   *   --color-{name}-border-accent   Medium border
   *   --color-{name}-border-vivid    Strong border
   *   --color-{name}-on-muted        Text on muted fill
   *   --color-{name}-on-accent       Text on accent fill
   *   --color-{name}-on-vivid        Text on vivid fill
   *   --color-{name}-outline         Focus/outline color
   *
   * Lean subset expanded per component needs.
   * Neutral has all tiers (page backgrounds, text, borders).
   * Primary and Danger partially expanded for base element styles.
   * =================================================================== */

    /* Page-level */
    --color-background: var(--color-gray-50);
    --color-surface: hsl(0 0% 100%);
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-600);
    --color-overlay: hsl(0 0% 0% / 0.4);
    --color-border-muted: var(--color-neutral-border-muted);

    /* Primary */
    --color-primary-fill-muted: var(--color-blue-50);
    --color-primary-fill-accent: var(--color-blue-100);
    --color-primary-fill-vivid: var(--color-blue-800);
    --color-primary-border-muted: var(--color-blue-200);
    --color-primary-border-accent: var(--color-blue-600);
    --color-primary-on-vivid: white;

    /* Neutral */
    --color-neutral-fill-muted: var(--color-gray-50);
    --color-neutral-fill-accent: var(--color-gray-100);
    --color-neutral-fill-vivid: var(--color-gray-900);
    --color-neutral-border-muted: var(--color-gray-200);
    --color-neutral-border-accent: var(--color-gray-400);
    --color-neutral-on-muted: var(--color-gray-900);
    --color-neutral-on-accent: var(--color-gray-600);
    --color-neutral-on-vivid: white;

    /* Success */
    --color-success-fill-muted: var(--color-green-50);
    --color-success-fill-vivid: var(--color-green-600);
    --color-success-border-muted: var(--color-green-200);
    --color-success-border-accent: var(--color-green-700);
    --color-success-on-muted: var(--color-green-700);
    --color-success-on-vivid: white;

    /* Warning */
    --color-warning-fill-muted: var(--color-amber-50);
    --color-warning-fill-vivid: var(--color-amber-500);
    --color-warning-border-muted: var(--color-amber-200);
    --color-warning-border-accent: var(--color-amber-600);
    --color-warning-on-muted: var(--color-amber-600);
    --color-warning-on-vivid: var(--color-gray-900);

    /* Danger */
    --color-danger-fill-muted: var(--color-red-50);
    --color-danger-fill-vivid: var(--color-red-600);
    --color-danger-border-muted: var(--color-red-200);
    --color-danger-border-accent: var(--color-red-700);
    --color-danger-on-muted: var(--color-red-700);
    --color-danger-on-vivid: white;

    /* ===================================================================
   * Focus Ring
   * =================================================================== */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-primary-fill-vivid);

    /* ===================================================================
   * Borders
   * =================================================================== */
    --border-thin: 1px;

    /* ===================================================================
   * Border Radii
   * =================================================================== */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* ===================================================================
   * Shadows
   * =================================================================== */
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05);
    --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
    --shadow-lg: 0 10px 15px hsl(0 0% 0% / 0.1);

    /* ===================================================================
   * Transitions
   * =================================================================== */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    /* ===================================================================
   * Measures (max-width constraints for page-level content)
   * =================================================================== */
    --measure-prose: 40rem; /* ~640px — optimal reading line length */
    --measure-form: 48rem; /* ~768px — forms, compact UIs */
    --measure-content: 72rem; /* ~1152px — data tables, dashboards */
}