/* ============================================================
   LMS Platform — Design System
   Tokens: colors, typography, spacing, motion, dark mode
   ============================================================ */

/* ── FONT FACES ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ── DESIGN TOKENS — LIGHT MODE ─────────────────────────────── */
:root {
  /* Primary indigo */
  --color-primary:        #5B54A8;
  --color-primary-light:  #7B75C2;
  --color-primary-subtle: #EEEDF8;
  --color-primary-dark:   #3D3780;

  /* Neutral surfaces */
  --color-bg:             #FAFAF9;
  --color-surface:        #FFFFFF;
  --color-muted:          #F4F4F2;
  --color-border:         #E8E8E5;

  /* Text */
  --color-text-primary:   #1A1A2E;
  --color-text-secondary: #6B6B80;
  --color-text-tertiary:  #A0A0B0;

  /* Semantic pastel — backgrounds */
  --color-mint-bg:     #A7E6C9;
  --color-peach-bg:    #FED6C2;
  --color-amber-bg:    #FFE4A8;
  --color-lavender-bg: #D8D4F0;
  --color-rose-bg:     #FFD6D6;

  /* Semantic pastel — text */
  --color-mint-text:     #2D9B6A;
  --color-peach-text:    #C25C2A;
  --color-amber-text:    #B07A10;
  --color-lavender-text: #5B54A8;
  --color-rose-text:     #B03030;

  /* Semantic dark mode backgrounds (pre-defined for toggle) */
  --color-mint-bg-dark:     #1A3D2E;
  --color-peach-bg-dark:    #3D2418;
  --color-amber-bg-dark:    #3D2E00;
  --color-lavender-bg-dark: #252040;
  --color-rose-bg-dark:     #3D1818;

  /* Semantic dark mode text */
  --color-mint-text-dark:     #6FCCA0;
  --color-peach-text-dark:    #F0A07A;
  --color-amber-text-dark:    #D4A830;
  --color-lavender-text-dark: #9E98D8;
  --color-rose-text-dark:     #D47878;

  /* Typography */
  --font-display: 'Satoshi', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Type scale */
  --text-display-xl: 48px;
  --text-display-l:  36px;
  --text-h1:         28px;
  --text-h2:         22px;
  --text-h3:         18px;
  --text-h4:         16px;
  --text-body-l:     17px;
  --text-body-m:     15px;
  --text-body-s:     13px;
  --text-caption:    12px;

  /* Line heights */
  --lh-display: 1.15;
  --lh-h1:      1.25;
  --lh-h2:      1.3;
  --lh-h3:      1.4;
  --lh-h4:      1.4;
  --lh-body-l:  1.65;
  --lh-body-m:  1.6;
  --lh-body-s:  1.5;
  --lh-caption: 1.4;

  /* Spacing — 8pt base grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Border radius */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 28px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-xl:    0 20px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

  /* Motion timing — per guidelines */
  --duration-hover:   150ms;
  --duration-state:   200ms;
  --duration-panel:   250ms;
  --duration-modal:   250ms;
  --duration-content: 200ms;
  --duration-progress:800ms;
  --duration-toast-in: 300ms;
  --duration-toast-out:400ms;

  --ease-out:    ease-out;
  --ease-in-out: ease-in-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-w:    280px;
  --topbar-h:     60px;
  --content-max:  1200px;
  --lesson-max:   720px;
  --bottom-nav-h: 60px;
}

/* ── DARK MODE TOKEN OVERRIDES ──────────────────────────────── */
[data-theme="dark"] {
  --color-bg:             #13131F;
  --color-surface:        #1E1E2E;
  --color-muted:          #252535;
  --color-border:         #2E2E42;
  --color-text-primary:   #EEEDF8;
  --color-text-secondary: #9898B0;
  --color-text-tertiary:  #5E5E78;

  --color-primary:        #7B75C2;
  --color-primary-light:  #9D99D4;
  --color-primary-subtle: #252540;
  --color-primary-dark:   #5B54A8;

  /* Semantic pastels flip to dark variants */
  --color-mint-bg:     #1A3D2E;
  --color-peach-bg:    #3D2418;
  --color-amber-bg:    #3D2E00;
  --color-lavender-bg: #252040;
  --color-rose-bg:     #3D1818;

  --color-mint-text:     #6FCCA0;
  --color-peach-text:    #F0A07A;
  --color-amber-text:    #D4A830;
  --color-lavender-text: #9E98D8;
  --color-rose-text:     #D47878;

  --shadow-card:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 28px rgba(0,0,0,0.6);
  --shadow-xl:    0 20px 48px rgba(0,0,0,0.7);
}

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

html {
  overflow-x: hidden;
  /* Dark mode page background transition */
  transition: background-color 300ms ease-out;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  font-weight: 400;
  line-height: var(--lh-body-m);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[data-theme="dark"] body {
  font-weight: 300;
}

input, select, textarea, button {
  max-width: 100%;
  font-family: var(--font-body);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

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

/* ── TYPOGRAPHY — BASE ELEMENTS ─────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  color: var(--color-text-primary);
}
h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  color: var(--color-text-primary);
}
h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: var(--color-text-secondary);
}
p {
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-text-secondary);
}

/* ── TYPOGRAPHY UTILITY CLASSES ─────────────────────────────── */
.text-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}
.text-display-l {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.text-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--lh-h1); letter-spacing: -0.02em; }
.text-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--lh-h2); }
.text-h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; line-height: var(--lh-h3); }
.text-h4 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 500; line-height: var(--lh-h4); }
.text-body-l { font-size: var(--text-body-l); line-height: var(--lh-body-l); }
.text-body-m { font-size: var(--text-body-m); line-height: var(--lh-body-m); }
.text-body-s { font-size: var(--text-body-s); line-height: var(--lh-body-s); }
.text-caption { font-size: var(--text-caption); line-height: var(--lh-caption); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-indigo    { color: var(--color-primary); }

/* ── ANIMATION KEYFRAMES ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes progressFill {
  from { width: var(--progress-from, 0%); }
  to   { width: var(--progress-to, 0%); }
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px)  rotate(360deg); opacity: 0; }
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ── LEGACY VARIABLE COMPATIBILITY SHIM ─────────────────────── */
/* Maps old variable names used in view files to new design tokens */
:root {
  /* Old accent/primary aliases */
  --accent:         var(--color-primary);
  --accent-dark:    var(--color-primary-dark);
  --accent-light:   var(--color-primary-subtle);
  --accent-subtle:  rgba(91, 84, 168, 0.06);
  --primary:        var(--color-text-primary);

  /* Old semantic colors */
  --success:        var(--color-mint-text);
  --success-bg:     var(--color-mint-bg);
  --error:          var(--color-rose-text);
  --error-bg:       var(--color-rose-bg);
  --warning:        var(--color-amber-text);
  --warning-bg:     var(--color-amber-bg);
  --info:           var(--color-lavender-text);
  --info-bg:        var(--color-lavender-bg);

  /* Old neutral grays → mapped to closest new neutral */
  --gray-50:        #FAFAF9;
  --gray-100:       #F4F4F2;
  --gray-150:       #EDEDEB;
  --gray-200:       #E8E8E5;
  --gray-300:       #D5D5D0;
  --gray-400:       #BCBCB4;
  --gray-500:       #A0A0B0;
  --gray-600:       #6B6B80;
  --gray-700:       #4A4A60;
  --gray-800:       #2E2E42;
  --gray-900:       #1A1A2E;

  /* White shorthand */
  --white:          #FFFFFF;

  /* Old font shorthand */
  --font:           var(--font-body);

  /* Old shadow aliases */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:      var(--shadow-card);
  --shadow-md:      var(--shadow-hover);
  /* --shadow-lg and --shadow-xl already defined */

  /* Old transition shorthands */
  --transition:     all var(--duration-hover) var(--ease-out);
  --transition-md:  all var(--duration-state) var(--ease-out);
}

[data-theme="dark"] {
  /* Dark mode overrides for legacy variables */
  --accent:         var(--color-primary);
  --accent-light:   var(--color-primary-subtle);
  --accent-subtle:  rgba(123, 117, 194, 0.12);

  --success:        var(--color-mint-text);
  --success-bg:     var(--color-mint-bg);
  --error:          var(--color-rose-text);
  --error-bg:       var(--color-rose-bg);
  --warning:        var(--color-amber-text);
  --warning-bg:     var(--color-amber-bg);
  --info:           var(--color-lavender-text);
  --info-bg:        var(--color-lavender-bg);

  --gray-50:        #13131F;
  --gray-100:       #1A1A2E;
  --gray-150:       #1E1E2E;
  --gray-200:       #252535;
  --gray-300:       #2E2E42;
  --gray-400:       #3E3E56;
  --gray-500:       #5E5E78;
  --gray-600:       #9898B0;
  --gray-700:       #B8B8CC;
  --gray-800:       #D4D4E0;
  --gray-900:       #EEEDF8;

  --white:          #1E1E2E;

  --shadow-xs:      0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:      var(--shadow-card);
  --shadow-md:      var(--shadow-hover);
}