/* R5 Academy — Design Tokens
   Cyber-industrial racing meets engineering precision. */

:root {
  /* Surfaces — black carbon stack */
  --carbon-0: #07080B;
  --carbon-1: #0A0B0F;
  --carbon-2: #12141A;
  --carbon-3: #181B23;
  --steel: #1F232D;
  --titanium: #2A2F3A;
  --titanium-border: #353B48;

  /* Metallic — silver/chrome family */
  --chrome-dim: #5C6473;
  --chrome: #8A93A3;
  --chrome-bright: #B3BCCC;
  --platinum: #E2E6EE;
  --white-cold: #F4F6FA;

  /* Signature — cyber blue */
  --cyber-deep: #0046A6;
  --cyber: #007CFF;
  --cyber-bright: #2E9CFF;
  --cyber-electric: #4DD2FF;
  --cyber-glow: rgba(0, 124, 255, 0.45);
  --cyber-soft: rgba(0, 124, 255, 0.08);

  /* Functional */
  --success: #00D49A;
  --warn: #FFB020;
  --danger: #FF4D5E;

  /* Gradients */
  --grad-chrome: linear-gradient(135deg, #D9DFE9 0%, #8A93A3 35%, #4A515E 65%, #B3BCCC 100%);
  --grad-cyber: linear-gradient(135deg, #00B4FF 0%, #007CFF 50%, #0046A6 100%);
  --grad-edge: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
  --grad-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,124,255,0.18) 0%, rgba(0,124,255,0) 60%);
  --grad-panel: linear-gradient(180deg, #181B23 0%, #12141A 100%);

  /* Typography */
  --font-display: 'Chakra Petch', 'Saira Condensed', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Scale (1.25 ratio adjusted) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;
  --fs-6xl: 7.5rem;

  /* Spacing (8px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 960px;
  --nav-h: 72px;

  /* Radii — sharp by default, cyber edges */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Borders */
  --bd-thin: 1px solid var(--titanium-border);
  --bd-cyber: 1px solid rgba(0, 124, 255, 0.35);
  --bd-bright: 1px solid rgba(255, 255, 255, 0.12);

  /* Shadows */
  --sh-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 32px -8px rgba(0,0,0,0.6);
  --sh-elevated: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 56px -12px rgba(0,0,0,0.7);
  --sh-cyber: 0 0 0 1px rgba(0,124,255,0.4), 0 12px 32px -8px rgba(0,124,255,0.35);
  --sh-cyber-strong: 0 0 0 1px rgba(0,124,255,0.6), 0 24px 56px -12px rgba(0,124,255,0.5);

  /* Motion */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-accel: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 560ms;

  /* Clip paths — signature angular cuts */
  --clip-cyber: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --clip-tag: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --clip-tag-right: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
}