/* ============================================================================
   OnLearn — Design tokens
   Vibrant edtech-dark. One brand gradient (violet -> cyan) used with intent:
   it encodes *progress*, not decoration. Everything else stays disciplined.
   ========================================================================== */
:root {
  /* — Surfaces — */
  --bg:            #0D1117;
  --bg-deep:       #0A0E14;
  --surface:       #161B22;
  --surface-2:     #1C2530;
  --surface-3:     #232E3B;
  --border:        #21262D;
  --border-strong: #2E3947;
  --overlay:       rgba(7, 10, 15, .66);

  /* — Text — (all clear WCAG AA on --bg/--surface; --text-faint lifted from
     #66727F which failed 4.5:1, so it's safe for real informational text) */
  --text:        #F0F6FC;
  --text-muted:  #9AA7B8;
  --text-faint:  #8E9CAD;
  --text-onaccent: #FFFFFF;

  /* — Brand — */
  --violet:      #7C3AED;
  --violet-300:  #A78BFA;
  --cyan:        #06B6D4;
  --cyan-300:    #67E8F9;
  --accent:      #8B5CF6;   /* borders, rings, icons — non-text accents (≥3:1) */
  --accent-text: #A78BFA;   /* accent-colored TEXT — passes 4.5:1 on every surface */
  --grad:        linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --grad-text:   linear-gradient(120deg, #A78BFA 0%, #67E8F9 100%);
  --grad-soft:   linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.14));

  /* — Semantic — */
  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #FB7185;
  --info:    #22D3EE;
  /* warm accent — reserved for human/celebratory moments (streaks, mastery,
     completion) so the system isn't mono-cool. Pairs with the cool brand grad. */
  --ember:   #FB923C;
  --easy:    #34D399;
  --medium:  #FBBF24;
  --hard:    #FB7185;

  /* — Typography — */
  --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-xs:  .75rem;    --fs-sm:  .8125rem;  --fs-base: .9375rem;
  --fs-md:  1rem;      --fs-lg:  1.125rem;  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;   --fs-3xl: 2.25rem;   --fs-4xl: 3rem;
  --fs-5xl: 3.875rem;

  --lh-tight: 1.12;  --lh-snug: 1.3;  --lh-normal: 1.6;
  --tracking-eyebrow: .16em;

  /* — Spacing — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* — Radius — */
  --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* — Elevation / glow — */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-3: 0 30px 70px -20px rgba(0,0,0,.7);
  --glow-violet: 0 10px 40px -10px rgba(124,58,237,.55);
  --glow-cyan:   0 10px 40px -10px rgba(6,182,212,.45);
  --ring: 0 0 0 3px rgba(167,139,250,.65);

  /* — Motion — */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .12s; --dur-2: .22s; --dur-3: .4s; --dur-4: .7s;

  /* — Layout — */
  --sidebar-w: 264px;
  --sidebar-w-min: 78px;
  --topbar-h: 62px;
  --container: 1180px;
  --container-wide: 1360px;
}