/*
 * NSXCA design tokens.
 *
 * Heritage palette pulled from NSX factory colorways:
 *   Berlina Black (1991 launch), Championship White (Type-R),
 *   Imola Orange (Type-R), Formula Red, Indy Yellow,
 *   New Formula Red, Sebring Silver.
 *
 * Imola Orange = the marque's signature accent and our "live" color
 * for Pulse feed indicators, CTAs, and event branding.
 */

:root {
  /* surfaces */
  --color-bg:           #0a0a0a;   /* Berlina Black, deepened for OLED */
  --color-bg-elevated:  #141414;
  --color-surface:      #1a1a1a;
  --color-surface-2:    #242424;
  --color-border:       #2a2a2a;
  --color-border-strong:#3a3a3a;

  /* text */
  --color-text:         #f5f5f5;   /* Championship White */
  --color-text-soft:    #d4d4d4;
  --color-text-muted:   #8a8a8a;
  --color-text-dim:     #555;

  /* accents */
  --color-imola:        #ee5500;   /* Imola Orange — primary accent */
  --color-imola-glow:   #ff7733;
  --color-imola-soft:   rgba(238, 85, 0, 0.12);
  --color-formula-red:  #c8102e;
  --color-indy:         #fcd116;   /* Indy Yellow */
  --color-na1:          #ee5500;   /* chassis-gen color: NA1 = Imola */
  --color-na2:          #c8102e;   /* chassis-gen color: NA2 = Formula Red */

  /* semantic */
  --color-live:         var(--color-imola);
  --color-success:      #4ade80;
  --color-warn:         #fcd116;
  --color-danger:       #ef4444;

  /* type */
  --font-display:       "Saira Condensed", "Bebas Neue", Impact, sans-serif;
  --font-sans:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* type scale (mobile-first; bumped at md+) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.75rem;
  --fs-5xl:  5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* shape */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* elevation (subtle on dark) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-glow-imola: 0 0 0 1px rgba(238,85,0,0.4), 0 6px 24px rgba(238,85,0,0.2);

  /* layout */
  --max-width: 1320px;
  --header-h: 64px;
  --mobile-nav-h: 64px;
  --container-pad: var(--space-5);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 400ms;
}

@media (min-width: 768px) {
  :root {
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.5rem;
    --fs-3xl:  3.5rem;
    --fs-4xl:  4.75rem;
    --fs-5xl:  7rem;
    --container-pad: var(--space-8);
    --header-h: 72px;
  }
}