/* AthlEats Design System — CSS Custom Properties */
:root {
  /* Brand */
  --clr-primary:         #2D5016;
  --clr-primary-hover:   #3d6b1f;
  --clr-primary-dark:    #1e3610;
  --clr-accent:          #7A9E5A;
  --clr-accent-hover:    #96b872;

  /* Surface */
  --clr-bg:              #F8F6F2;
  --clr-surface:         #FFFFFF;
  --clr-surface-subtle:  #F0EDE7;
  --clr-border:          #E2DDD5;
  --clr-border-strong:   #C9C3B8;

  /* Text */
  --clr-text:            #1A1A1A;
  --clr-text-muted:      #6B6560;
  --clr-text-subtle:     #9B9590;
  --clr-text-on-primary: #FFFFFF;

  /* Semantic */
  --clr-error:           #C0392B;
  --clr-error-bg:        #FDF0EE;
  --clr-success:         #27AE60;

  /* Typography */
  --ff-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;

  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* Spacing (4-pt scale) */
  --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;

  /* Radii */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* Transitions */
  --tr-fast: 150ms ease;
  --tr-base: 200ms ease;
  --tr-slow: 300ms ease;

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* Layout */
  --max-content: 480px;
  --nav-h:       64px;
}