/* ==========================================================================
   Peak Momentum — Design Tokens
   Source of truth: BRAND-003 §2.3 + Visual Brand Toolkit v1.0.
   ✅ = extracted verbatim from the brand.  🟡 = web value proposed & approved at the gate.
   ========================================================================== */

:root {
  /* --- Color: palette (✅ extracted; HEX is authoritative) --------------- */
  --graphite:        #16232E;
  --graphite-dark:   #0E1720;
  --teal:            #12A594;   /* accent + signal only */
  --teal-deep:       #0E8377;   /* small teal type / thin rules on light */
  --light-bg:        #F2F6F6;

  /* --- Color: roles ------------------------------------------------------ */
  --color-background:   #FFFFFF;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  var(--light-bg);
  --color-surface-dark: var(--graphite-dark);

  --color-text-primary:   var(--graphite);
  --color-text-secondary: #3B4650;   /* 🟡 muted graphite */
  --color-text-muted:     #6A747C;   /* 🟡 */
  --color-text-on-dark:   var(--light-bg);

  --color-primary:        var(--graphite);
  --color-primary-hover:  var(--graphite-dark);
  --color-secondary:      var(--teal);
  --color-accent:         var(--teal);
  --color-accent-deep:    var(--teal-deep);

  --color-border:         #E1E7E7;   /* 🟡 hairline */
  --color-border-strong:  #C9D2D2;   /* 🟡 */

  /* CTA — Q1 decision: Graphite button + white text, teal as accent */
  --color-cta:        var(--graphite);
  --color-cta-hover:  var(--graphite-dark);
  --color-cta-text:   #FFFFFF;

  --color-success:  var(--teal-deep);
  --color-warning:  #B4531A;   /* form errors only */

  /* --- Typography (✅ Raleway; 🟡 numeric scale) ------------------------- */
  --font-heading: 'Raleway', 'Lato', 'Calibri', system-ui, -apple-system, sans-serif;
  --font-body:    'Raleway', 'Lato', 'Calibri', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */

  --line-height-tight:   1.15;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight:  0;
  --letter-spacing-normal: 0.05em;
  --letter-spacing-wide:   0.18em;   /* small-caps eyebrows */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Spacing (🟡 4px base) --------------------------------------------- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-8: 3rem;   --space-10: 4rem;
  --space-12: 5rem;  --space-16: 6rem;  --space-20: 8rem;  --space-24: 10rem;

  /* --- Layout (🟡) ------------------------------------------------------- */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 75rem;
  --section-padding-y:    4rem;
  --section-padding-y-lg: 6rem;

  /* --- Radius & elevation (🟡 restrained) -------------------------------- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(22,35,46,.06);
  --shadow-md: 0 4px 12px rgba(22,35,46,.08);
  --shadow-lg: 0 12px 32px rgba(22,35,46,.10);

  /* --- Buttons (🟡) ------------------------------------------------------ */
  --button-radius:      6px;
  --button-padding-x:   1.5rem;
  --button-padding-y:   0.8125rem;
  --button-font-size:   1rem;
  --button-font-weight: 600;

  /* --- Motion ------------------------------------------------------------ */
  --transition: 160ms ease;
}