/* ==========================================================================
   Legacy Performance — Design tokens
   Single source of truth. Every value used in components comes from here.
   Mirrors brand/tokens.json. Change a token, not a component.
   ========================================================================== */

:root {
  /* ---- Brand color (locked) --------------------------------------------- */
  --antic-blue:        #b3261e;  /* Legacy red, darkened for buttons and text on light */
  --antic-blue-deep:   #8e1c17;  /* Pressed / hover on light */
  --antic-blue-lift:   #ff6262;  /* Links on dark surfaces */
  --antic-blue-wash:   #ffe9e8;  /* Selected rows, focus halos on light */

  /* ---- Neutrals: named after the materials ------------------------------ */
  --carbon:            #15171b;  /* Primary dark surface (the badge field) */
  --graphite:          #24272d;  /* Raised dark surface */
  --gunmetal:          #3a3e46;  /* Hairlines on dark */
  --machined:          #626973;  /* Secondary text on light */
  --brushed:           #c2c8d0;  /* Secondary text on dark, disabled */
  --billet:            #e6e8eb;  /* Hairlines on light */
  --bead-blast:        #f3f4f6;  /* Light section surface */
  --white:             #ffffff;
  --black:             #000000;

  /* ---- Status ----------------------------------------------------------- */
  --ok:                #1f7a4d;
  --warn:              #9a6200;
  --error:             #b3261e;

  /* ---- Semantic roles (light theme = default) --------------------------- */
  --surface:           var(--white);
  --surface-alt:       var(--bead-blast);
  --text:              var(--carbon);
  --text-muted:        var(--machined);
  --line:              var(--billet);
  --accent:            var(--antic-blue);
  --accent-text:       var(--antic-blue);
  --focus:             var(--antic-blue);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid modular scale (≈1.25 minor third on mobile → 1.333 on desktop) */
  --step--1: clamp(0.83rem, 0.80rem + 0.12vw, 0.90rem);   /* meta, legal     */
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);   /* body            */
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.45rem);   /* lead, card name */
  --step-2:  clamp(1.45rem, 1.30rem + 0.72vw, 1.95rem);   /* h4              */
  --step-3:  clamp(1.75rem, 1.48rem + 1.30vw, 2.60rem);   /* h3              */
  --step-4:  clamp(2.10rem, 1.62rem + 2.35vw, 3.60rem);   /* h2              */
  --step-5:  clamp(2.60rem, 1.70rem + 4.40vw, 5.40rem);   /* h1              */
  --step-6:  clamp(3.20rem, 1.60rem + 7.80vw, 8.50rem);   /* hero only       */

  --leading-tight: 0.92;
  --leading-snug:  1.15;
  --leading-body:  1.6;
  --tracking-display: -0.01em;
  --tracking-label:   0.04em;

  /* ---- Space (4px base) ------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 9rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);
  --gutter:    clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1440px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* ---- The chamfer: the badge's cut corner, used as the brand's shape ---- */
  --chamfer-sm: 6px;
  --chamfer:    12px;
  --chamfer-lg: 28px;
  --radius:     2px;        /* Everything not chamfered is nearly square. */

  /* ---- Elevation (used sparingly: overlays only, never on cards) -------- */
  --shadow-overlay: 0 24px 64px -12px rgb(0 0 0 / 0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  520ms;

  --z-header: 50;
  --z-drawer: 80;
  --z-toast:  90;
}

/* Dark sections opt in with .theme-dark (header, hero, footer, systems). */
.theme-dark {
  --surface:     var(--carbon);
  --surface-alt: var(--graphite);
  --text:        var(--white);
  --text-muted:  var(--brushed);
  --line:        var(--gunmetal);
  --accent-text: var(--antic-blue-lift);
  --focus:       var(--antic-blue-lift);
  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}