/* ============================================================
   Vạn Môn Phái — Design Tokens v3 ("Học Viện Sáng" / Light Academy)
   Light-professional elearning system. Legacy variable NAMES are
   preserved across all three design generations — only values move.

   Naming caution (historical): --ink-* and --gold-* keep their names
   from the dark era but now hold LIGHT-scale values, documented per
   token below. Page CSS written against them keeps working.
   ============================================================ */

:root {
  /* ---- Surface scale (legacy name --ink-*: was dark ink, now light paper) ---- */
  --ink-950: #f4f6fb;          /* page base — cool paper, blue-tinted (never pure white) */
  --ink-900: #f8fafd;          /* raised wash */
  --ink-800: #ffffff;          /* card surface */
  --ink-700: #fbfcfe;          /* elevated surface */
  --ink-600: #e6ebf4;          /* hover / hairline fill */

  /* ---- Brand primary: academic blue ---- */
  --primary-700: #1d3aa8;
  --primary-600: #2749c9;      /* main */
  --primary-500: #3b5fe0;
  --primary-100: #e8edfb;
  --primary-50:  #f2f5fd;

  /* ---- Gamification amber (legacy name --gold-*: readable on light) ---- */
  --gold-300: #f5c96b;         /* fills/badges only, never text on white */
  --gold-400: #d97706;         /* icon/emphasis */
  --gold-500: #b45309;         /* text-safe amber (AA on white) */
  --gold-600: #92400e;         /* deep amber text */

  --jade-500: #047857;
  --crimson-500: #be123c;
  --sky-500: #0369a1;
  --violet-500: #6d28d9;

  /* ---- Semantic tokens (legacy names) ---- */
  --bg-color: var(--ink-950);
  --card-bg: #ffffff;
  --text-color: #1a2233;               /* slate ink, blue-tinted */
  --text-muted: #5b6779;
  --accent-color: var(--primary-600);  /* brand accent = academic blue */
  --accent-light: var(--primary-100);
  --accent-strong: var(--primary-700);
  --success-color: #047857;
  --danger-color: #be123c;
  --warning-color: #b45309;
  --info-color: #0369a1;
  --glass: #ffffff;                     /* legacy name — now solid surface */
  --glass-border: #e3e8f2;              /* legacy name — now hairline border */
  --border-soft: #eaeef6;

  /* ---- Shape & elevation (soft layered shadows, no glow) ---- */
  --border-radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 34, 51, 0.05), 0 1px 1px rgba(26, 34, 51, 0.03);
  --shadow-md: 0 1px 2px rgba(26, 34, 51, 0.04), 0 6px 18px rgba(26, 34, 51, 0.07);
  --shadow-lg: 0 2px 4px rgba(26, 34, 51, 0.05), 0 16px 40px rgba(26, 34, 51, 0.12);
  --glow-gold: 0 1px 2px rgba(180, 83, 9, 0.10);        /* legacy name — soft amber shadow */
  --glow-gold-strong: 0 4px 14px rgba(180, 83, 9, 0.16);

  /* ---- Typography ---- */
  --font-display: "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --fs-sm: 0.85rem;
  --fs-base: 0.9575rem;
  --fs-lg: 1.125rem;
  --fs-h2: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --fs-h1: clamp(1.6rem, 1.25rem + 1.4vw, 2.15rem);

  /* ---- Spacing (8px grid) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;

  /* ---- Z-index scale ---- */
  --z-nav: 50;
  --z-dropdown: 1000;
  --z-modal: 9999;
  --z-urgent: 99999;

  accent-color: var(--primary-600);
  color-scheme: light;
}

::selection {
  background: var(--primary-100);
  color: var(--primary-700);
}

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 4px;
}