/* 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 {
    /* Three-tier green system (walk #58, decided 2026-07-06): green accent retires cyan,
       spruce chrome + pine surface retire navy. Contrast for each pairing is recorded on
       the semantic tokens below. */
    /* Green accent family. */
    --neo-green-mint:       #35E0A6;  /* on-dark accents: eyebrows, brand mark, SVG strokes */
    --neo-green-deep:       #0F6E56;  /* button fills + light-surface accent text */
    --neo-green-deep-hover: #0B5742;  /* button-fill hover step */
    --neo-green-deco:       #149E70;  /* decorative rules, chip fills, icons */
    --neo-green-soft:       #D8F1E7;  /* soft bands, step circles */
    /* Spruce chrome (header / footer / page edges / headings on light sections). */
    --neo-spruce-900: #08211B;
    --neo-spruce-800: #0D2F26;
    /* Faint spruce tint (the light end of the spruce tier): the alternating marketing band
       reads as an intentional spruce step rather than a neutral grey. Dark section text
       (--neo-grey-700 #3F4A5F) clears 8:1 on it. */
    --neo-spruce-50:  #EEF3F1;
    /* Pine surface (dark page surfaces: hero, dark bands). */
    --neo-pine-900: #0B2E23;
    --neo-pine-800: #123B2E;
    /* Forest mid-dark (the fourth tier, decided 2026-07-09): popup/banner chrome that must read
       as green against the near-black spruce/pine tiers without borrowing the button-fill green.
       Sits between pine-900 and green-deep; white text on it clears 7:1. */
    --neo-forest-700: #0D4E3C;

    /* 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 (spruce-tinted). */
    --shadow-card:       0 1px 2px rgba(8, 33, 27, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(8, 33, 27, 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-green-deco);   /* #149E70 general / decorative accent */
    --color-accent-strong: var(--neo-green-deep);   /* #0F6E56 */
    --color-accent-soft:   var(--neo-green-soft);   /* #D8F1E7 */
    /* Accent for TEXT: the AA-safe accent for accent-colored words and links on light
       surfaces. #0F6E56 reads 6.20:1 on white and 5.22:1 on accent-soft (#D8F1E7),
       passing AA (4.5:1) on both. */
    --color-accent-text:   var(--neo-green-deep);
    /* Accent for BUTTON FILLS: white button text on #0F6E56 reads 6.20:1 (AA); hover steps
       one darker to #0B5742, white text 8.55:1. Use these for filled primary buttons, not text. */
    --color-accent-fill:       var(--neo-green-deep);
    --color-accent-fill-hover: var(--neo-green-deep-hover);
    /* Accent for ON-DARK surfaces (spruce chrome, pine surface): eyebrows, brand mark, SVG
       strokes, on-dark links. Mint #35E0A6 reads 9.94:1 on spruce (#08211B) and 8.65:1 on
       pine (#0B2E23), AA on both dark tiers. */
    --color-accent-on-dark:    var(--neo-green-mint);

    /* Brand chrome + dark surfaces (three-tier green). Consumers reference these so a page
       never hardcodes a tier. Chrome = spruce (header / footer / edges); dark surface = pine
       (hero, dark bands). Mint (--color-accent-on-dark) is the AA-safe accent on both. */
    --color-chrome:             var(--neo-spruce-900);  /* #08211B */
    --color-chrome-panel:       var(--neo-spruce-800);  /* #0D2F26 */
    --color-surface-dark:       var(--neo-pine-900);    /* #0B2E23 */
    --color-surface-dark-panel: var(--neo-pine-800);    /* #123B2E */
    --color-chrome-popup:       var(--neo-forest-700);  /* #0D4E3C - editor/popup banner tier */
    /* Faint spruce alternation surface: the light marketing band that carries the section rhythm. */
    --color-surface-tint:       var(--neo-spruce-50);   /* #EEF3F1 */

    --color-success:   var(--neo-success);
    --color-warning:   var(--neo-warning);
    --color-error:     var(--neo-danger);
    /* S6 edge: the cyan status color survives the green migration pending S6's Scott round. */
    --color-info:      var(--neo-info);

    /* The recommended-choice accent (onboarding-polish P1): a selected/recommended wizard
       card leans on the accent fill for its rule + the soft accent for its band, so "this is
       the guided default" carries meaning, not just decoration. */
    --color-recommended-band: var(--neo-green-soft);
    --color-recommended-rule: var(--color-accent);

    /* 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(8, 33, 27, 0.05);
    --shadow-md: 0 3px 8px rgba(8, 33, 27, 0.08);
    --shadow-lg: 0 8px 24px rgba(8, 33, 27, 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;
}