/*
  Design tokens: colors, spacing, radius, shadows, motion, breakpoints.
  Every other stylesheet reads these — never hard-code a color/space/radius elsewhere.

  Color system (fixed spec, do not drift from these hex values):
    Background  Near-black      #010209
    Surface     -               #050A15
    Card        -               #0D0F19
    Primary     Electric Cyan   #33D6FF  - active lesson, buttons, progress, links, selected items
    Secondary   Neon Purple     #8B5CF6  - challenges, unit headers, advanced lessons, rewards
    Success     Chemistry Green #3DDC97  - completed lessons, checkmarks, XP gained, correct answers
    Warning     Laboratory Orange #FFB347 - practice, optional lessons, caution, timers
    Error       Reaction Red    #FF5D73  - wrong answers, incorrect balancing, missing electrons
    Pink        Organic Pink    #FF4FA3  - games only: organic chemistry
    Gold        Reward Gold     #FFD23F  - games only: streaks, stars, rewards
    Text        #F5F7FF (primary) / #B8B9C9 (secondary) / #70738A (muted) / #45485C (disabled)
*/
:root {
  /* surfaces */
  --bg-main: #010209;
  --bg-surface: #050A15;
  --bg-card: #0D0F19;
  --border-default: #28263D;
  --border-glow: #6F3CCF;

  /* text */
  --text-primary: #F5F7FF;
  --text-secondary: #B8B9C9;
  --text-muted: #70738A;
  --text-disabled: #45485C;

  /* primary - Electric Cyan: active lesson, buttons, progress, links, selected items */
  --c-primary: #33D6FF;
  --c-primary-dark: #0E8AAD;
  --c-primary-glow-text: #A8ECFF;

  /* secondary - Neon Purple: challenges, unit headers, advanced lessons, rewards */
  --c-secondary: #8B5CF6;
  --c-secondary-dark: #5B34B1;
  --c-secondary-glow-text: #D3C2FF;

  /* success - Chemistry Green: completed lessons, checkmarks, XP gained, correct answers */
  --c-success: #3DDC97;
  --c-success-dark: #22935F;
  --c-success-glow-text: #A6F5D6;

  /* warning - Laboratory Orange: practice, optional lessons, caution, timers */
  --c-warning: #FFB347;
  --c-warning-dark: #B87A1E;
  --c-warning-glow-text: #FFDBA6;

  /* error - Reaction Red: wrong answers, incorrect balancing, missing electrons */
  --c-error: #FF5D73;
  --c-error-dark: #B5293D;
  --c-error-glow-text: #FFB3BE;

  /* pink - Organic Pink: games only, organic chemistry content */
  --c-pink: #FF4FA3;
  --c-pink-dark: #B02E6E;
  --c-pink-glow-text: #FFB8DE;

  /* gold - Reward Gold: games only, streaks/stars/rewards */
  --c-gold: #FFD23F;
  --c-gold-dark: #B8931E;
  --c-gold-glow-text: #FFE9A3;

  /* signature gradient + glow, used for game headers/buttons that want extra polish */
  --gradient-primary: linear-gradient(135deg, #7C3FFF 0%, #9B5CFF 50%, #C06CFF 100%);
  --glow-primary: 0 0 8px rgba(155, 92, 255, 0.45), 0 0 24px rgba(155, 92, 255, 0.25);

  /* atom colors - games only, standard CPK-style element coloring for molecule/shell diagrams */
  --atom-h: #F5F7FF;
  --atom-c: #3A3A46;
  --atom-n: #3B82F6;
  --atom-o: #FF4D4D;
  --atom-f: #90E68C;
  --atom-cl: #4ADE80;
  --atom-s: #FFD23F;
  --atom-p: #FF9D4D;
  --atom-si: #D9C9A3;
  --atom-b: #FFB3D9;
  --atom-al: #B8BCC4;
  --atom-na: #C084FC;
  --atom-mg: #86EFAC;
  --atom-k: #A855F7;
  --atom-ca: #6EE7B7;
  --atom-fe: #E08A4F;
  --atom-cu: #D97757;
  --atom-zn: #94A3B8;
  --atom-ag: #E5E7EB;
  --atom-i: #9333EA;
  --atom-li: #FF5C7A;
  --atom-be: #4DD0E1;
  --atom-br: #FF5A36;
  --atom-ba: #16C47F;
  --atom-cs: #FFC800;
  --atom-sr: #E11D48;
  --atom-sn: #7FA8C9;
  --atom-au: #F5B700;
  --atom-hg: #A5B4CB;
  --atom-pb: #6B7FD7;
  --atom-cr: #2DD4BF;
  --atom-mn: #C026D3;
  --atom-co: #4361EE;
  --atom-ni: #22C55E;
  --atom-sc: #C4B5FD;
  --atom-ti: #94A8FF;
  --atom-ga: #FFB4E6;
  --atom-ge: #5EEAD4;
  --atom-as: #D4E157;
  --atom-se: #E63946;
  --atom-kr: #B0F2FF;
  --atom-xe: #8FE0D8;
  --atom-rb: #FF8FA3;
  --atom-v: #7C83FD;
  --atom-pt: #E8E6D9;
  --atom-default: #9BA3B4;

  /* spacing scale */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* blob-card border-radius formulas (rotate between these so cards don't look stamped from one mold).
     Corners are capped with min(%, px) so the curve stays gentle on narrow/tall cards instead of
     ballooning into an oversized oval — percentage-only radii distort badly on narrow boxes. */
  --blob-1: min(18%, 30px) min(10%, 22px) min(16%, 28px) min(9%, 20px) / min(10%, 22px) min(16%, 26px) min(9%, 20px) min(14%, 24px);
  --blob-2: min(9%, 20px) min(16%, 28px) min(10%, 22px) min(18%, 30px) / min(16%, 26px) min(9%, 20px) min(14%, 24px) min(10%, 22px);
  --blob-3: min(14%, 24px) min(10%, 22px) min(18%, 30px) min(9%, 20px) / min(9%, 20px) min(18%, 30px) min(10%, 22px) min(16%, 28px);
  --blob-4: min(10%, 22px) min(18%, 30px) min(9%, 20px) min(16%, 28px) / min(14%, 24px) min(10%, 22px) min(16%, 28px) min(9%, 20px);

  /* shadows / glow - soft and diffuse throughout, never a hard/harsh edge */
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.3);
  --glow-alpha: 0.4;

  /* glassmorphism: frosted, slightly transparent surfaces with a thin illuminated border */
  --glass-bg: rgba(27, 35, 48, 0.62);
  --glass-bg-surface: rgba(21, 27, 36, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);

  /* type: geometric sans throughout - Space Grotesk for headings, Inter for body/UI text */
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --weight-heading: 800;

  /* motion */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --speed-fast: 150ms;
  --speed-med: 260ms;
  --speed-slow: 420ms;

  /* breakpoints (referenced in comments only — CSS custom properties can't be used inside @media,
     so every stylesheet must use these literal values instead of inventing new ones) */
  /* --bp-tablet: 780px */
  /* --bp-desktop: 1180px */
  /* --bp-wide: 1500px */
}