/* ****************** STUDYLUMO — Design Token System ****************** */

:root {

  /* ─── Brand ─────────────────────────────────────────── */
  --color-primary:        #22C55E;
  --color-primary-light:  #DCFCE7;
  --color-primary-mid:    #16A34A;
  --color-primary-dark:   #14532D;
  --color-primary-border: rgba(34, 197, 94, 0.50);
  --color-primary-shadow: rgba(34, 197, 94, 0.20);
  --color-primary-trans:  rgba(34, 197, 94, 0.10);

  /* ─── Semantic ───────────────────────────────────────── */
  --color-error:          #EF4444;
  --color-error-light:    #FFEDED;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-info:           #3B82F6;
  --color-info-light:     #EFF6FF;
  --color-purple:         #8B5CF6;
  --color-purple-light:   #F5F3FF;
  --color-amber:          #F59E0B;
  --color-amber-light:    #FEF3C7;

  /* ─── Light Theme (Warm Neutral) ─────────────────────── */
  --bg:                   #F8F7F4;   /* warm parchment */
  --surface:              #FFFFFF;
  --surface-raised:       #F2F0EB;
  --text-primary:         #1A1814;   /* warm near-black */
  --text-secondary:       #5C5750;
  --text-tertiary:        #9C9890;
  --border:               #E8E5DE;
  --border-strong:        #CECAC0;
  --shadow:               rgba(26, 24, 20, 0.07);
  --overlay:              rgba(26, 24, 20, 0.50);

  /* ─── Spacing (8dp grid) ─────────────────────────────── */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ─── Semantic aliases ───────────────────────────────── */
  --space-xs:  var(--space-1);   /*  4px */
  --space-sm:  var(--space-2);   /*  8px */
  --space-md:  var(--space-4);   /* 16px */
  --space-lg:  var(--space-6);   /* 24px */
  --space-xl:  var(--space-8);   /* 32px */
  --space-2xl: var(--space-12);  /* 48px */
  --space-3xl: var(--space-16);  /* 64px */
  --space-4xl: var(--space-20);  /* 80px */

  /* ─── Border Radius ─────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── Typography ─────────────────────────────────────── */
  --font-sans:   'Poppins', 'Inter' ,'Outfit', system-ui, -apple-system, sans-serif;
  --font-base:   16px;

  --text-xs:     10px;
  --text-sm:     12px;
  --text-md:     14px;
  --text-base:   16px;
  --text-lg:     18px;
  --text-xl:     20px;
  --text-2xl:    24px;
  --text-3xl:    32px;
  --text-4xl:    40px;
  --text-5xl:    52px;
  --text-6xl:    64px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* ─── Borders ────────────────────────────────────────── */
  --border-thin:    0.8px;
  --border-normal:  1px;
  --border-thick:   1.5px;

  /* ─── Shadows ────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px var(--shadow), 0 1px 2px var(--shadow);
  --shadow-md:  0 4px 16px var(--shadow), 0 2px 6px var(--shadow);
  --shadow-lg:  0 8px 32px var(--shadow), 0 4px 12px var(--shadow);
  --shadow-xl:  0 16px 48px rgba(26, 24, 20, 0.12);
  --shadow-glow: 0 0 40px rgba(34, 197, 94, 0.18);

  /* ─── Transitions ────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Layout ─────────────────────────────────────────── */
  --max-width-sm:    480px;
  --max-width-md:    768px;
  --max-width-lg:    1024px;
  --max-width-xl:    1280px;
  --max-width-2xl:   1440px;

  /* ─── Breakpoints (for reference — use via @media) ───── */
  /* mobile:  < 640px   */
  /* tablet:  640-1024px */
  /* desktop: > 1024px   */

  /* ─── Z-Index ────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     500;
  --z-toast:   1000;
}

/* Dark mode intentionally disabled — site is always light themed */