/* NEO Design Tokens.
   Source of truth: docs/superpowers/specs/2026-05-25-design-direction.md (sections 2-4).
   Loaded BEFORE app.css so every page sees the var(--neo-*) tokens. */

/* Self-hosted Inter v4 (SIL Open Font License). No Google Fonts CDN call. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter/inter-800.woff2') format('woff2');
}

:root {
    /* Primary scale (navy, the trust color). */
    --neo-navy-900: #0A1428;
    --neo-navy-800: #0F1E3A;
    --neo-navy-700: #1A2D52;
    --neo-navy-600: #2A3F6F;
    --neo-navy-500: #4A6390;

    /* Accent (cyan, the "evolve" color). */
    /* cyan-800 minted 2026-06-10 (P2-20, Scott-approved): the AA-safe accent for TEXT.
       5.42:1 on white, 4.69:1 on accent-soft — passes 4.5:1 on every light surface
       accent-colored text sits on. (#067A8F and #0E7A92 were both rejected: each
       fails AA on at least one shipped surface.) */
    --neo-cyan-800: #06748A;
    --neo-cyan-700: #0888A0;
    --neo-cyan-600: #0FA7C2;
    --neo-cyan-500: #1ECFE6;
    --neo-cyan-100: #D6F4F9;

    /* Neutrals. */
    --neo-grey-50:  #F7F9FC;
    --neo-grey-100: #EEF2F8;
    --neo-grey-200: #E4E9F2;
    --neo-grey-300: #CBD3E0;
    --neo-grey-500: #8898AA;
    --neo-grey-700: #3F4A5F;
    --neo-grey-900: #1A2333;
    --neo-white:    #FFFFFF;

    /* Status / semantic. */
    --neo-success: #16A571;
    --neo-warning: #E89232;
    --neo-danger:  #D14848;
    --neo-info:    #0FA7C2;

    /* Typography scale (1.125 modular ratio off a 16px base). */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   18px;
    --text-lg:   22px;
    --text-xl:   32px;
    --text-2xl:  44px;
    --text-3xl:  56px;

    /* Matching line heights. */
    --leading-xs:   16px;
    --leading-sm:   20px;
    --leading-base: 24px;
    --leading-md:   28px;
    --leading-lg:   32px;
    --leading-xl:   40px;
    --leading-2xl:  52px;
    --leading-3xl:  64px;

    /* Spacing scale (base unit 4px). */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Radii. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Shadows. */
    --shadow-card:       0 1px 2px rgba(15, 30, 58, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(15, 30, 58, 0.08);

    /* ---------- Goal 5: shared operator + marketing semantic tokens ---------- */

    /* Semantic color tokens (mapped to the --neo-* palette so operator pages get
       parity with the marketing surface while keeping existing app.css refs working). */
    --color-bg:        var(--neo-grey-50);
    --color-surface:   var(--neo-white);
    --color-text:      var(--neo-grey-900);
    --color-text-soft: var(--neo-grey-700);
    --color-muted:     var(--neo-grey-500);
    --color-border:    var(--neo-grey-200);
    --color-border-strong: var(--neo-grey-300);
    --color-accent:    var(--neo-cyan-600);
    --color-accent-strong: var(--neo-cyan-700);
    --color-accent-soft:   var(--neo-cyan-100);
    /* Accent for TEXT (P2-20): --color-accent is a fill color — as text on white it
       reads 2.87:1 and fails AA. Use this for accent-colored words and links. */
    --color-accent-text:   var(--neo-cyan-800);
    /* Accent for BUTTON FILLS (P2-20 / decision 7): white button text on --color-accent
       (#0FA7C2) reads 2.87:1 and fails the 3:1 UI-component bar. cyan-700 (#0888A0) reads
       4.17:1 with white — AA-large-safe on every btn-primary surface; hover steps one
       darker (cyan-800, 5.42:1). Use these for filled primary buttons, not for text. */
    --color-accent-fill:       var(--neo-cyan-700);
    --color-accent-fill-hover: var(--neo-cyan-800);
    --color-success:   var(--neo-success);
    --color-warning:   var(--neo-warning);
    --color-error:     var(--neo-danger);
    --color-info:      var(--neo-info);

    /* Goal 5.2 — soft tint + accessible-contrast text tokens for the three
       non-info severities. The "soft" backgrounds match the NeoCallout +
       NeoStatusBadge variant aesthetics; the "text" tokens hit WCAG AA
       (4.5:1) against their soft background. Values mirror the Tailwind
       amber/green/red 100/800 pairs the prior code hardcoded. */
    --color-warning-soft: #FEF3C7;
    --color-warning-text: #854D0E;
    --color-success-soft: #DCFCE7;
    --color-success-text: #166534;
    --color-error-soft:   #FEE4E2;
    --color-error-text:   #9A1C1C;

    /* Border helpers. */
    --border-thin:  1px solid var(--color-border);
    --border-thick: 2px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);

    /* Granular shadow scale (in addition to the marketing card shadows). */
    --shadow-sm: 0 1px 2px rgba(15, 30, 58, 0.05);
    --shadow-md: 0 3px 8px rgba(15, 30, 58, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 30, 58, 0.12);

    /* Breakpoints (for media-query consistency). */
    --break-sm: 480px;
    --break-md: 768px;
    --break-lg: 1200px;

    /* Focus ring (a11y; visible focus indicator for keyboard nav). */
    --focus-ring: 0 0 0 3px var(--color-accent-soft), 0 0 0 4px var(--color-accent);
}

/* Base resets. Scoped to be additive: app.css still owns its own opinions. */
html {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Tables and KPI strips opt into tabular figures via this utility. */
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}