/* ==========================================================================
   Design Tokens — Learning Framework
   CSS custom properties for theming, spacing, typography, and timing.
   Dark theme is the default; light theme via [data-theme="light"].
   ========================================================================== */

:root {
  /* --- Colour: Dark theme (default) --- */
  --color-bg-main:      #0D1117;
  --color-bg-card:      #21262D;
  --color-text-main:    #E6EDF3;
  --color-text-sub:     #8B949E;
  --color-accent:       #6C63FF;
  --color-correct:      #00C853;
  --color-incorrect:    #FF5252;
  --color-xp:           #FFB300;
  --color-streak:       #00B0FF;

  /* Card shadow (dark theme: none — card distinguished by bg) */
  --shadow-card:        none;

  /* --- Category colours --- */
  --color-cat-1:        #6C63FF;
  --color-cat-2:        #00B0FF;
  --color-cat-3:        #00C853;
  --color-cat-4:        #FFB300;

  /* --- Spacing (8 px grid) --- */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;

  /* --- Typography --- */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue',
                        sans-serif;

  --font-size-xs:       0.75rem;   /* 12 px */
  --font-size-sm:       0.875rem;  /* 14 px */
  --font-size-base:     1rem;      /* 16 px */
  --font-size-md:       1.125rem;  /* 18 px */
  --font-size-lg:       1.25rem;   /* 20 px */
  --font-size-xl:       1.5rem;    /* 24 px */
  --font-size-2xl:      2rem;      /* 32 px */
  --font-size-hero:     3rem;      /* 48 px */

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-loose:  1.75;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* --- Border radius --- */
  --radius-sm:          6px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-full:        9999px;

  /* --- Timing --- */
  --timing-fast:        150ms;
  --timing-normal:      300ms;
  --timing-slow:        500ms;

  /* --- Z-index layers --- */
  --z-base:             1;
  --z-sticky:           100;
  --z-modal:            1000;
  --z-toast:            1100;
}

/* ==========================================================================
   Light theme overrides
   ========================================================================== */
[data-theme="light"] {
  --color-bg-main:      #FFFFFF;
  --color-bg-card:      #FFFFFF;
  --color-text-main:    #1F2328;
  --color-text-sub:     #656D76;
  --color-accent:       #6C63FF;
  --color-correct:      #00C853;
  --color-incorrect:    #FF5252;
  --color-xp:           #FFB300;
  --color-streak:       #00B0FF;

  --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.12),
                        0 1px 2px rgba(0, 0, 0, 0.08);
}