/* Product brand design tokens — the single source of truth for the shell UI.
   Brand book: primary #0f043d (deep indigo), secondary #ff6600 (orange),
   white featured heavily.

   Accessibility (binding): #0f043d on white ~16:1 (excellent). #ff6600 on
   white ~2.9:1 — FAILS WCAG AA for normal text, and white-on-orange is also
   sub-AA. So orange is for accents / large UI / fills only; text on orange
   uses indigo (--brand-on-secondary). A contrast check guards this in CI. */

:root {
    /* Brand */
    --brand-primary: #0f043d;        /* deep indigo */
    --brand-primary-700: #1a0d56;    /* lifted indigo for gradients/hover */
    --brand-primary-300: #4b3f7a;    /* muted indigo for secondary text on dark */
    --brand-secondary: #ff6600;      /* orange — FILLS / large accents ONLY (2.9:1, not text) */
    --brand-secondary-600: #b84700;  /* text-bearing orange: 5.33:1 on white — AA-safe links/edges */
    --brand-surface: #ffffff;        /* white — dominant canvas */

    /* Foreground pairings (contrast-checked) */
    --brand-on-primary: #ffffff;     /* white text on indigo */
    --brand-on-secondary: #0f043d;   /* indigo text on orange (AA-safe) */
    --text-strong: #0f043d;          /* body/headings on white */
    --text-muted: #423d57;           /* secondary text on white (~9.6:1 — crisp at small sizes) */

    /* Neutrals */
    --surface-subtle: #f6f6fb;       /* faint indigo-tinted off-white */
    --border: #dcdce8;               /* hairline dividers — quiet but visible */
    --border-strong: #c2c1d6;        /* control + row-divider outlines — crisp, not heavy */

    /* Type */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Spacing scale (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Radius + elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 4, 61, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 4, 61, 0.12);
    --shadow-lg: 0 24px 60px rgba(15, 4, 61, 0.28);
}