@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    --bg: #0A0E1A;
    --bg2: #12172B;
    --fg: #E8FBFF;
    --overlay-rgb: 232, 251, 255;
    --navshell-rgb: 10, 14, 26;
    --paper: #FBF7EE;
    --paper2: #EFE7D6;
    --ink: #22303C;
    --muted: #7C8AAE;
    --accent: #FF2E97;
    --accent-dark: #C4157A;
    --accent-light: #FF7DC0;
    --teal: #00E5FF;
    --teal-dark: #0899B0;
    --teal-light: #7DF9FF;
    --success: #39FF88;
    --success-dark: #1FBF63;
    --error: #FF3860;
    --error-dark: #C4123C;
    --warning: #F9C846;
    --warning-dark: #C99A2E;
    --info: var(--teal);
    --info-dark: var(--teal-dark);
    --gold: #F9F002;
    --purple: #B026FF;
    --locked: #232A42;
    --neon-grid: rgba(0, 229, 255, 0.05);
    --accent-rgb: 255, 46, 151;
    --teal-rgb: 0, 229, 255;
    --purple-rgb: 176, 38, 255;
    --success-rgb: 57, 255, 136;
    --warning-rgb: 249, 200, 70;
    --error-rgb: 255, 56, 96;

    /* ---------- SPACING SCALE (master spec PART 8 §3/§6) ----------
       4px base unit. Use these instead of arbitrary pixel values so every
       feature (cards, forms, modals, lesson content, games) shares one
       rhythm. Existing per-component pixel values are left as-is where
       already shipped and stable — new UI should reach for these first. */
    --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;

    /* ---------- RADIUS SCALE ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* ---------- SHADOW SCALE ----------
       Dark-theme-appropriate by default; body.theme-picker--light overrides below
       so shadows stay visible (not muddy) against the light paper surface. */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-glow-accent: 0 0 24px rgba(var(--accent-rgb), 0.35);
    --shadow-glow-teal: 0 0 24px rgba(var(--teal-rgb), 0.35);

    /* ---------- TRANSITIONS ---------- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* ---------- FOCUS RING (master spec PART 8 §25) ---------- */
    --focus-ring: 0 0 0 3px rgba(var(--teal-rgb), 0.45);
}

/* ---------- BREAKPOINT REFERENCE ----------
   CSS custom properties cannot be used inside @media queries, so these
   are documented here as the single source of truth every responsive
   rule in the project should match, rather than inventing new breakpoint
   numbers per file (master spec PART 8 §13):
     small mobile   <= 380px
     large mobile   <= 480px
     tablet         <= 768px
     laptop         <= 1024px
     desktop        <= 1440px
     large desktop  >  1440px
   ------------------------------------------------------------------- */

body.theme-picker--light {
    --bg: #F6EFDE;
    --bg2: #EDE3CC;
    --fg: #2A2118;
    --overlay-rgb: 42, 33, 24;
    --navshell-rgb: 246, 239, 222;
    --muted: #8A7C64;
    --locked: #DED2B4;
    --accent: #E2793D;
    --accent-dark: #B85D28;
    --accent-light: #F6B98A;
    --teal: #4F9D9E;
    --teal-dark: #356364;
    --teal-light: #8FD0D0;
    --success: #58CC6A;
    --success-dark: #3C9A4A;
    --error: #E2574C;
    --error-dark: #A8352B;
    --warning: #D9971F;
    --warning-dark: #A8740F;
    --gold: #E7B740;
    --purple: #8A6FB0;
    --accent-rgb: 226, 121, 61;
    --teal-rgb: 79, 157, 158;
    --purple-rgb: 138, 111, 176;
    --success-rgb: 88, 204, 106;
    --warning-rgb: 217, 151, 31;
    --error-rgb: 226, 87, 76;

    --shadow-sm: 0 2px 8px rgba(42, 33, 24, 0.10);
    --shadow-md: 0 6px 20px rgba(42, 33, 24, 0.14);
    --shadow-lg: 0 12px 40px rgba(42, 33, 24, 0.18);
}


/* ---------- ACCESSIBILITY HARDENING ---------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(var(--teal-rgb), 0.85);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Qo'shimcha, "reference" dizayn o'zgaruvchilari
   (avvalgi reference-ui-fix.css dan) — Lug'at va boshqa komponentlarda
   ishlatiladi. ---------- */
:root{--ref-panel:#111b2d;--ref-panel-2:#172338;--ref-line:#273650;--ref-text:#eef4ff;--ref-muted:#9aa9c1;--ref-accent:#a855f7;--ref-pink:#ec2b9b;--ref-cyan:#67e8f9}

/* ---------- "UI Polish" dizayn o'zgaruvchilari (avvalgi final-ui-polish.css dan) ---------- */
:root{
  --ui-bg:#070b14;
  --ui-surface:#0d1322;
  --ui-surface-2:#121a2c;
  --ui-surface-3:#182239;
  --ui-line:rgba(182,196,231,.14);
  --ui-line-strong:rgba(86,226,255,.34);
  --ui-text:#f7f9ff;
  --ui-muted:#8f9bb8;
  --ui-cyan:#4de1ff;
  --ui-pink:#ff3aa8;
  --ui-purple:#9c5cff;
  --ui-gold:#ffc95b;
  --ui-green:#48dc8a;
  --ui-shadow:0 24px 70px rgba(0,0,0,.32);
}

/* ---------- "Ultimate polish" dizayn o'zgaruvchilari (avvalgi ultimate-polish.css dan) ---------- */
:root{
  --ui-surface: rgba(16,24,43,.88);
  --ui-surface-2: rgba(21,31,53,.94);
  --ui-line: rgba(153,181,224,.16);
  --ui-line-strong: rgba(73,226,255,.34);
  --ui-muted: #8e9bb8;
  --ui-cyan: #4de1ff;
  --ui-violet: #9d5cff;
  --ui-pink: #ff2e97;
  --ui-shadow: 0 24px 70px rgba(0,0,0,.32);
}

/* ---------- "Quality polish" dizayn o'zgaruvchilari (avvalgi quality-polish.css dan) ---------- */
:root {
  --qp-surface: rgba(15, 23, 42, .88);
  --qp-surface-2: rgba(19, 29, 50, .94);
  --qp-border: rgba(173, 190, 230, .16);
  --qp-border-strong: rgba(72, 221, 255, .32);
  --qp-shadow: 0 24px 70px rgba(0,0,0,.34);
  --qp-glow: 0 0 30px rgba(168,85,247,.12);
}