/* ============================================================
   No1 Tuningfiles — Design System tokens
   Self-contained, light-first. Charcoal + Ignition Red.
   Brand: #E31E24 (red) · #2B2A29 (carbon)
   Heavy condensed italic display = motorsport energy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600;1,700&family=IBM+Plex+Mono:wght@400;500;600&family=Saira+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&display=swap');

:root {
  /* ---- brand ramps ---- */
  --red-50:  #FDECEC;
  --red-100: #FBD5D6;
  --red-200: #F5A8AA;
  --red-300: #EE7174;
  --red-400: #E84A4E;
  --red-500: #E31E24;   /* brand red — sampled from logo */
  --red-600: #C5161B;
  --red-700: #9E1115;
  --red-800: #6E0C0F;

  --carbon-25:  #FAFAFA;
  --carbon-50:  #F5F5F5;
  --carbon-100: #ECECEC;
  --carbon-200: #DEDEDE;
  --carbon-300: #C7C7C8;
  --carbon-400: #9A9A9D;
  --carbon-500: #6B6B6E;
  --carbon-600: #4A4A4B;
  --carbon-700: #343433;
  --carbon-800: #2B2A29;   /* brand carbon — sampled from logo */
  --carbon-900: #1C1B1B;
  --carbon-950: #121211;

  /* ---- semantic (light) ---- */
  --bg:            #FFFFFF;
  --bg-grid:       #E3E3E3;
  --surface:       #FFFFFF;
  --surface-2:     #F5F5F5;
  --surface-3:     #ECECEC;
  --border:        #E6E6E6;
  --border-strong: #D2D2D3;

  --text:        #2B2A29;
  --text-muted:  #6B6B6E;
  --text-subtle: #9A9A9D;

  --accent:        #E31E24;
  --accent-hover:  #C5161B;
  --accent-press:  #9E1115;
  --accent-soft:   #FDECEC;
  --accent-text:   #C5161B;
  --text-on-accent:#FFFFFF;

  --info:        #1F6FEB;  --info-soft:    #E7F0FE;
  --success:     #1F9D55;  --success-soft: #E4F5EC;
  --warning:     #C7820B;  --warning-soft: #FBF1DC;
  --danger:      #E31E24;  --danger-soft:  #FDECEC;

  /* ---- type ---- */
  --font-display: 'Saira Condensed', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --text-2xs: 11px; --text-xs: 12px;  --text-sm: 14px;  --text-md: 16px;
  --text-lg: 19px;  --text-xl: 24px;  --text-2xl: 32px; --text-3xl: 42px;
  --text-4xl: 58px; --text-5xl: clamp(48px, 7vw, 88px);

  --ls-tight: -0.01em; --ls-label: 0.12em;
  --lh-snug: 1.3; --lh-relaxed: 1.6;

  /* ---- spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --container: 1240px;

  /* ---- effects ---- */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20,18,17,0.06);
  --shadow-sm: 0 1px 3px rgba(20,18,17,0.08), 0 1px 2px rgba(20,18,17,0.05);
  --shadow-md: 0 4px 14px rgba(20,18,17,0.08), 0 2px 6px rgba(20,18,17,0.05);
  --shadow-lg: 0 12px 34px rgba(20,18,17,0.12);
  --glow-power: 0 0 0 1px rgba(227,30,36,0.35), 0 4px 16px rgba(227,30,36,0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}