/* ============================================
   STUDY PARTNER — Design Tokens
   ============================================ */

:root {
  /* ── Colors ── */
  --clr-primary:       #1a1a2e;
  --clr-primary-light: #2d2d44;
  --clr-primary-dark:  #0f0f1a;

  --clr-accent:        #e8a838;
  --clr-accent-light:  #f0c06a;
  --clr-accent-dark:   #c98a1e;

  --clr-sage:          #6b9080;
  --clr-sage-light:    #8fb5a6;
  --clr-sage-dark:     #4f7366;

  --clr-coral:         #e07a5f;
  --clr-coral-light:   #e99983;
  --clr-coral-dark:    #c45d42;

  --clr-cream:         #faf8f5;
  --clr-cream-dark:    #f0ece6;

  --clr-text:          #2c2c3a;
  --clr-text-light:    #6b6b7b;
  --clr-text-muted:    #9a9aad;

  --clr-white:         #ffffff;
  --clr-black:         #0a0a12;
  --clr-border:        #e4e2de;

  --clr-success:       #4caf7d;
  --clr-warning:       #f0ad4e;
  --clr-error:         #e05252;

  /* ── Typography ── */
  --ff-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.5rem;     /* 40px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-wider:   0.05em;

  /* ── Spacing ── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.5rem;    /* 8px  */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(26,26,46,0.04);
  --shadow-sm:  0 2px 4px rgba(26,26,46,0.06);
  --shadow-md:  0 4px 12px rgba(26,26,46,0.08);
  --shadow-lg:  0 8px 24px rgba(26,26,46,0.10);
  --shadow-xl:  0 16px 48px rgba(26,26,46,0.12);
  --shadow-2xl: 0 24px 64px rgba(26,26,46,0.16);
  --shadow-glow-accent: 0 4px 24px rgba(232,168,56,0.3);
  --shadow-glow-sage:   0 4px 24px rgba(107,144,128,0.3);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   500ms;

  /* ── Layout ── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --nav-height:     72px;

  /* ── Z-Index ── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}