/* ══════════════════════════════════════════════════════════════
   RevizionBot — Design Tokens
   Single source of truth for all colours, spacing, typography,
   shadows, radii, and motion across the app.

   Every page imports this file first, then styles-components.css.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour · Surfaces (dark theme default) ─────────────── */
  --color-bg:          #0a0a0f;
  --color-surface-1:   #13131d;
  --color-surface-2:   #1b1b2a;
  --color-surface-3:   #232336;
  --color-surface-4:   #2d2d44;
  --color-border:      #2a2a42;
  --color-border-hover:#3d3d5c;

  /* ── Colour · Brand accents ─────────────────────────────── */
  --color-accent:       #8b5cf6;   /* vivid violet — primary */
  --color-accent-hover: #a855f7;
  --color-accent-dim:   #6d4bd6;
  --color-accent-glow:  rgba(139, 92, 246, 0.25);
  --color-accent-soft:  rgba(139, 92, 246, 0.10);
  --color-accent-faint: rgba(139, 92, 246, 0.06);

  /* ── Colour · Semantic ──────────────────────────────────── */
  --color-success:      #14b8a6;
  --color-success-soft: rgba(20, 184, 166, 0.12);
  --color-warning:      #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.12);
  --color-danger:       #f43f5e;
  --color-danger-soft:  rgba(244, 63, 94, 0.12);
  --color-info:         #38bdf8;
  --color-info-soft:    rgba(56, 189, 248, 0.12);

  /* ── Colour · Subject accents (used on cards + dot grid) ── */
  --subject-biology:    #22c55e;
  --subject-chemistry:  #38bdf8;
  --subject-physics:    #f59e0b;
  --subject-maths:      #8b5cf6;
  --subject-english:    #f43f5e;
  --subject-history:    #d97706;
  --subject-geography:  #10b981;
  --subject-business:   #6366f1;

  /* ── Colour · Text ──────────────────────────────────────── */
  --color-text:         #f0f0f8;
  --color-text-muted:   #c0c0d8;
  --color-text-subtle:  #8888a8;
  --color-text-inverse: #0a0a0f;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif:  Georgia, 'Times New Roman', serif;
  --font-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, monospace;

  /* Font sizes (rem-based for accessibility) */
  --text-xs:       0.75rem;   /* 12px */
  --text-sm:       0.875rem;  /* 14px */
  --text-base:     1rem;      /* 16px */
  --text-lg:       1.125rem;  /* 18px */
  --text-xl:       1.25rem;   /* 20px */
  --text-2xl:      1.5rem;    /* 24px — H2 */
  --text-3xl:      2rem;      /* 32px — H1 */
  --text-4xl:      2.5rem;    /* 40px — display */
  --text-5xl:      3rem;      /* 48px — big display */
  --text-6xl:      4rem;      /* 64px — hero */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-widest: 0.12em;

  /* ── Spacing scale (4px grid) ───────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-pill:  9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-xl:    0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-glow:  0 8px 32px rgba(139, 92, 246, 0.25);
  --shadow-ring:  0 0 0 3px rgba(139, 92, 246, 0.35);

  /* ── Layout max-widths ──────────────────────────────────── */
  --max-hero:     1440px;
  --max-app:      1280px;
  --max-content:  720px;
  --max-prose:    640px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;

  /* ══════════════════════════════════════════════════════════
     LEGACY ALIASES — existing pages (dashboard.html,
     steptutor.html, etc.) still reference the old variable
     names in their inline CSS. We map them to the new tokens
     so nothing breaks before sessions 2/3 update them.
     ══════════════════════════════════════════════════════════ */
  --bg:             var(--color-bg);
  --surface:        var(--color-surface-1);
  --surface2:       var(--color-surface-2);
  --surface3:       var(--color-surface-3);
  --border:         var(--color-border);
  --border-hover:   var(--color-border-hover);
  --accent:         var(--color-accent);
  --accent2:        var(--color-accent-dim);
  --accent-glow:    var(--color-accent-glow);
  --accent-soft:    var(--color-accent-soft);
  --green:          var(--color-success);
  --green-soft:     var(--color-success-soft);
  --red:            var(--color-danger);
  --red-soft:       var(--color-danger-soft);
  --gold:           var(--color-warning);
  --gold-soft:      var(--color-warning-soft);
  --blue:           var(--color-info);
  --text:           var(--color-text);
  --text-secondary: var(--color-text-muted);
  --muted:          var(--color-text-subtle);
  --radius:         var(--radius-lg);
  --radius-sm:      var(--radius-md);
  --radius-xs:      var(--radius-sm);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.3);
  --transition:     var(--duration-normal) var(--ease);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME
   Apply via <body class="light"> — overrides only the tokens
   whose colour inverts. Every downstream component uses these
   same variable names, so nothing else needs to branch.
   ══════════════════════════════════════════════════════════════ */
body.light {
  --color-bg:          #f7f7fb;
  --color-surface-1:   #ffffff;
  --color-surface-2:   #f0f0f5;
  --color-surface-3:   #e6e6ee;
  --color-surface-4:   #d8d8e2;
  --color-border:      #e0e0ea;
  --color-border-hover:#c8c8d8;

  --color-text:         #1a1a2e;
  --color-text-muted:   #4a4a6b;
  --color-text-subtle:  #7878a0;
  --color-text-inverse: #ffffff;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 4px 8px rgba(0, 0, 0, 0.1), 0 24px 64px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 8px 32px rgba(139, 92, 246, 0.18);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL RESET + BASE
   ══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100vh;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--color-accent-hover);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--color-accent);
  color: #ffffff;
}

/* Scrollbar styling (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-surface-1); }
::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-surface-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-surface-4); }