/* ══════════════════════════════════
   DESIGN TOKENS
   Colors, fonts, spacing, clip-paths
══════════════════════════════════ */

:root {
  /* Brand — Safety Orange */
  --orange:         #FF8C00;
  --orange-bright:  #FFA033;
  --orange-dim:     #CC7000;
  --orange-tint:    rgba(255,140,0,0.12);
  --orange-glow:    rgba(255,140,0,0.25);
  --on-orange:      #4D2600;

  /* Surface tiers — tonal carving */
  --surface:              #131313;
  --surface-container-low:#1B1C1C;
  --surface-container:    #1F2020;
  --surface-container-high:#2A2A2A;
  --surface-container-highest:#353535;
  --surface-variant:      #353535;

  /* Legacy aliases (for gradual migration) */
  --charcoal:       #131313;
  --charcoal-mid:   #1B1C1C;
  --charcoal-light: #2A2A2A;
  --charcoal-border:#3a3428;

  /* On-surface text */
  --offwhite:       #E4E2E1;
  --on-surface:     #E4E2E1;
  --on-surface-variant: #DDC1AE;
  --warm-gray:      #A48C7A;
  --text-light:     #DDC1AE;
  --text-muted:     #564334;
  --outline:        #A48C7A;
  --outline-variant:#564334;

  /* Semantic */
  --success: #2a7a38;
  --warning: #c08010;
  --error:   #93000A;
  --error-text: #FFB4AB;
  --info:    #00B5FC;
  --tertiary: #00B5FC;
  --tertiary-light: #85CFFF;

  /* Typography — Space Grotesk + Public Sans */
  --font-display:   'Space Grotesk', sans-serif;
  --font-headline:  'Space Grotesk', sans-serif;
  --font-label:     'Space Grotesk', sans-serif;
  --font-body:      'Public Sans', sans-serif;

  /* Legacy alias */
  --font-condensed: 'Space Grotesk', sans-serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Clip-paths — trademark skewed edges */
  --clip-sm:  polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  --clip-md:  polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  --clip-lg:  polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);

  /* Machined groove — inset depth */
  --machined-groove: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
}