:root {
  /* Colors */
  --clr-orange:       #FF8B00;
  --clr-orange-dark:  #E07A00;
  --clr-orange-light: #FFA333;
  --clr-dark:         #111111;
  --clr-dark-alt:     #1A1A1A;
  --clr-dark-card:    #1E1E1E;
  --clr-white:        #FFFFFF;
  --clr-light:        #F8F8F8;
  --clr-light-alt:    #F0F0F0;
  --clr-text:         #222222;
  --clr-text-muted:   #666666;
  --clr-text-light:   #999999;
  --clr-border:       #E5E5E5;
  --clr-border-dark:  #2A2A2A;

  /* Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Font sizes */
  --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:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.75rem;
  --fs-6xl:  4.5rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-px: 1.5rem;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);
  --shadow-orange: 0 8px 32px rgba(255,139,0,0.25);

  /* Transitions */
  --trans-fast:   150ms ease;
  --trans-normal: 250ms ease;
  --trans-slow:   400ms ease;

  /* Z-index */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-modal:   1000;
}