/* ══════════════════════════════════════════════════════════════════════
   EnglishWithDan — Design Tokens
   Single source of truth for color, spacing, radius, shadow, type,
   motion and z-index across the public site.

   Load this file BEFORE any other page/component stylesheet.

   Values were chosen to match what already renders in production
   (dashboard.css's numbers, which already win the cascade on the one
   page — dashboard.html — where dashboard.css and mobile.css previously
   collided) so this file fixes the token-collision bug described in the
   audit without changing how any existing page currently looks.
   The one deliberate, visible exception is --brand: profile.html,
   inbox.html and tuition.html previously rendered mobile.css's pink
   gradient (#f093fb→#f5576c) for primary buttons/badges since no
   competing page-specific stylesheet overrode it there. The audit
   recommended standardizing on the red already used everywhere else
   (dashboard, reading, listening, writing, speaking, marketing) —
   see docs/design-system.md "Color" — so that pink is retired here.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────────────── */
  --brand:        #e53935;
  --brand-dark:   #c62828;
  --brand-light:  rgba(229,57,53,.12); /* tint, not solid hex — adapts correctly on dark surfaces with no per-theme override */
  --brand2:       #ff6b6b; /* secondary brand accent, used in gradients */

  --blue:         #3d8bff;
  --blue-dark:    #2c78f0;
  --purple:       #a78bfa;

  /* ── Semantic status ────────────────────────────────── */
  --success:       #16a34a;
  --success-light: rgba(22,163,74,.12);
  --green:         #22c55e; /* dashboard.css's own green — distinct shade from --success, preserved as-is */
  --warning:       #d97706;
  --warning-light: rgba(217,119,6,.12);
  --yellow:        #f59e0b; /* alias kept for existing --yellow consumers (badges/icons) */
  --danger:        #dc2626;
  --danger-light:  rgba(220,38,38,.12);

  /* ── Neutrals ───────────────────────────────────────── */
  --bg:       #f7f8fc;
  --surface:  #fff;
  --surface2: #f3f4f6;
  --border:   #e5e7eb;
  --border2:  #d1d5db;
  --text:     #111827;
  --text2:    #6b7280;
  --text3:    #9ca3af;

  /* ── Spacing scale (4px base) ───────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm: 9px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Shadow (elevation) ─────────────────────────────── */
  --shadow:    0 2px 12px rgba(0,0,0,.07);
  --shadow-md: 0 6px 24px rgba(0,0,0,.1);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.18);

  /* ── Type ───────────────────────────────────────────── */
  /* The site's actual body font (dashboard.css, reading/listening/writing —
     everywhere except login.html/register.html, which are being migrated
     off a stray 'Poppins' onto this same token). */
  --font-family: 'Plus Jakarta Sans', sans-serif;

  /* ── Type scale ─────────────────────────────────────── */
  --fs-display: 40px; --lh-display: 1.1;
  --fs-h1:      32px; --lh-h1:      1.2;
  --fs-h2:      24px; --lh-h2:      1.3;
  --fs-h3:      18px; --lh-h3:      1.4;
  --fs-body:    15px; --lh-body:    1.6;
  --fs-body-sm: 13px; --lh-body-sm: 1.5;
  --fs-caption: 12px; --lh-caption: 1.4;
  --fs-micro:   11px; --lh-micro:   1.3;

  /* ── Motion ─────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);

  /* ── Z-index scale ──────────────────────────────────── */
  --z-nav:      100;
  --z-dropdown: 200;
  --z-popover:  300;
  --z-modal:    1000;
  --z-toast:    1100;

  /* ── Layout ─────────────────────────────────────────── */
  --nav-height: 64px;
  --expiry-banner-height: 0px; /* set by nav.js while the premium-expiry banner is showing */
  --sidebar-w:  260px;
  --transition: all .25s ease;
}

[data-theme="dark"] {
  --bg:       #000000;
  --surface:  #0d0d0d;
  --surface2: #1a1a1a;
  --border:   #262626;
  --border2:  #333333;
  --text:     #f5f5f5;
  --text2:    #a3a3a3;
  --text3:    #737373;
  --shadow:    0 2px 12px rgba(0,0,0,.5);
  --shadow-md: 0 6px 24px rgba(0,0,0,.6);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.7);
}