/* Lacuna design tokens — Sprint 25 Move 12+13+14.
 *
 * Single-source design-token catalog. Pre-existing tokens in
 * `login.css` are kept as backwards-compat aliases so the migration
 * is mechanical and zero-visual-regression. New code uses these.
 *
 * Discipline references:
 *   - DTCG (W3C Design Tokens spec) — flat catalog + alias layer
 *   - IBM Carbon — spacing 4pt grid + semantic alias tokens
 *   - Stripe / Linear — 5-step type scale + restrained palette
 *   - ITCSS / Andy Bell's CUBE CSS — @layer-cascade discipline
 *
 * The @layer declaration order in reset.css fixes the cascade so a
 * `.utility` class always wins over a `.component` class which wins
 * over `base` element selectors. No !important needed downstream.
 */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
    :root {
        /* ---------------------------------------------------------------
         * RAW TOKENS — the source-of-truth scale.
         * --------------------------------------------------------------- */

        /* Color — raw scale (only used to derive semantic aliases below) */
        --navy-900: #0a0f1c;
        --navy-800: #141a2a;
        --navy-700: #1e2436;
        --gold-500: #c9a86a;
        --gold-600: #b8985a;
        --gold-100: rgba(201, 168, 106, 0.10);
        --gold-200: rgba(201, 168, 106, 0.45);
        --slate-100: #e8e8ea;
        --slate-300: #9aa0a8;
        --slate-400: #6b7280;
        --slate-500: #4b5563;
        --amber-500: #d4a85a;
        --red-500:   #f08080;
        --teal-500:  #7ab8d9;

        /* Spacing — 4pt grid. Six steps. No half-pixel ad-hoc values. */
        --space-1: 0.25rem;  /* 4px  */
        --space-2: 0.5rem;   /* 8px  */
        --space-3: 0.75rem;  /* 12px */
        --space-4: 1rem;     /* 16px */
        --space-6: 1.5rem;   /* 24px */
        --space-8: 2rem;     /* 32px */

        /* Typography — five sizes. */
        --text-xs:   0.75rem;   /* 12px */
        --text-sm:   0.875rem;  /* 14px */
        --text-base: 1rem;      /* 16px */
        --text-lg:   1.125rem;  /* 18px */
        --text-xl:   1.5rem;    /* 24px */

        --leading-tight: 1.2;
        --leading-snug:  1.4;
        --leading-base:  1.5;

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

        /* Radius — three steps. */
        --radius-sm: 2px;
        --radius-md: 4px;
        --radius-lg: 8px;

        /* Motion — two timings, no other custom curves. */
        --motion-fast: 120ms;
        --motion-base: 200ms;
        --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

        /* Elevation — two levels, both subtle. */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);

        /* ---------------------------------------------------------------
         * SEMANTIC ALIASES — what templates and components should read.
         * --------------------------------------------------------------- */

        /* Surfaces */
        --color-bg:       var(--navy-900);
        --color-bg-elev:  var(--navy-800);
        --color-bg-inset: var(--navy-700);

        /* Foreground text */
        --color-text:        var(--slate-100);
        --color-text-subtle: var(--slate-300);
        --color-text-faint:  var(--slate-400);

        /* Brand accent (the gold) */
        --color-brand:        var(--gold-500);
        --color-brand-hover:  var(--gold-600);
        --color-brand-bg:     var(--gold-100);
        --color-brand-border: var(--gold-200);

        /* State signals — VERDICT tier (loud, colored).
           Used by quadrant + decision-band chips: these answer
           "what does the system say?" */
        --color-state-good: var(--gold-500);
        --color-state-warn: var(--amber-500);
        --color-state-bad:  var(--red-500);
        --color-state-info: var(--teal-500);
        --color-state-mute: var(--slate-300);

        /* State signals — EXECUTION tier (quiet, mono).
           Used by job-status + connector-outcome chips: these answer
           "did the machine work?" Mono-treatment prevents a banker
           from confusing "DEGRADED" with "cautious". */
        --color-exec-fg:     var(--slate-100);
        --color-exec-bg:     rgba(154, 160, 168, 0.10);
        --color-exec-border: rgba(154, 160, 168, 0.35);
        --color-exec-dim-fg: var(--slate-400);

        /* ---------------------------------------------------------------
         * Sprint 33 — Layout containers + vertical rhythm + fluid type.
         *
         * Container scale (max-width of inner content column).
         * Narrow forms / docs / dashboards → --container-narrow (720px)
         * Standard reading surfaces        → --container-base   (1100px)
         * Data-dense tables + briefs       → --container-wide   (1400px)
         *
         * The 1100px base hits the "banker reference width" used by
         * Pitchbook / S&P CIQ / McKinsey reports — narrower than the
         * legacy 1400px so line-length stops feeling stretched on
         * 1920px screens. --container-wide is the legacy width, kept
         * for data-dense brief + mandate-detail surfaces.
         * --------------------------------------------------------------- */
        --container-narrow: 720px;
        --container-base:   1100px;
        --container-wide:   1400px;

        /* Page-frame padding scales fluidly with viewport — 16px at the
           narrowest phone, 48px at the widest desktop. Wraps the container
           so content never touches the screen edge. */
        --page-padding-x: clamp(1rem, 1rem + 2vw, 3rem);

        /* Vertical rhythm — three drum-beats. Use --rhythm for the
           default gap between major blocks (sections inside a page);
           --rhythm-tight for related-group spacing; --rhythm-loose for
           the breath between unrelated sections. */
        --rhythm:        1.5rem;   /* 24px */
        --rhythm-tight:  1rem;     /* 16px */
        --rhythm-loose:  2.5rem;   /* 40px */

        /* Fluid heading scale — clamp(min, preferred, max) means H1
           reads at ~28px on a 320px phone and ~44px on a 1440px desktop
           without media queries. Pitchbook / Linear / Stripe pattern. */
        --text-h1: clamp(1.75rem,   1.25rem + 1.5vw, 2.75rem);
        --text-h2: clamp(1.375rem,  1.125rem + 1vw,  2rem);
        --text-h3: clamp(1.125rem,  1rem    + 0.5vw, 1.5rem);
    }
}