/* ==========================================================================
   FPT Study Companion · Design Tokens (Modern SaaS Bento & Neo-Glassmorphism)
   Aesthetic: Linear / Vercel / Raycast precision + Duolingo tactile warmth
   ========================================================================== */

:root {
  /* 1. Typography System (3-Tier Hierarchy) */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-numbers: 'JetBrains Mono', 'Inter', ui-monospace, SFMono-Regular, monospace;

  /* 2. Surface Hierarchy & Bento Canvas */
  --bg-canvas: #F4F7FB;
  --bg-dot-pattern: radial-gradient(rgba(15, 23, 42, 0.065) 1px, transparent 1px);
  --bg-dot-size: 22px 22px;
  --surface-primary: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.92);
  --surface-glass-strong: rgba(255, 255, 255, 0.96);
  --surface-secondary: #F4F7FB;
  --surface-subtle: #F8FAFC;
  --surface-muted: #F1F5F9;
  --surface-blue: #EEF4FF;

  /* 3. Obsidian Navy Navigation Shell */
  --brand-navy: #0B1120;
  --brand-navy-elevated: #111C33;
  --brand-navy-hover: #172542;
  --brand-navy-border: rgba(255, 255, 255, 0.08);
  --nav-text: #CBD5E1;
  --nav-muted: #64748B;

  /* 4. Brand & Semantic Accents */
  --brand-blue: #2563EB;
  --brand-blue-hover: #1D4ED8;
  --brand-blue-soft: rgba(37, 99, 235, 0.12);
  --brand-orange: #F37021;
  --brand-green: #10B981;
  --focus-ring: #3B82F6;

  /* 5. Strict 3-Tier Typography Contrast */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;

  /* 6. Hairline Borders & Multi-Layered Elevation */
  --border-hairline: rgba(226, 232, 240, 0.85);
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-card: 0 12px 32px -8px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-hover: 0 18px 38px -10px rgba(15, 23, 42, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-popover: 0 24px 56px -12px rgba(15, 23, 42, 0.16), 0 4px 16px -2px rgba(16, 185, 129, 0.1), inset 0 1px 0 #FFFFFF;
  --dialog-shadow: 0 28px 90px -16px rgba(11, 17, 32, 0.34), 0 0 0 1px rgba(226, 232, 240, 0.85);
  --backdrop: rgba(11, 17, 32, 0.52);

  /* 7. Semantic Status Tokens */
  --status-success: #047857;
  --status-warning: #B45309;
  --status-danger: #BE123C;
  --status-info: #1D4ED8;
  --success-bg: #ECFDF5;
  --warning-bg: #FFFBEB;
  --danger-bg: #FFF1F2;
  --info-bg: #EFF6FF;

  /* 8. Gamification Mint & Streak Amber Tokens */
  --mint-bg: #ECFDF5;
  --mint-gradient: linear-gradient(180deg, #ECFDF5 0%, #F0FDF4 100%);
  --mint-border: #A7F3D0;
  --mint-border-strong: #34D399;
  --mint-ink: #065F46;
  --mint-accent: #10B981;
  --streak-bg: #FFFBEB;
  --streak-border: #FDE68A;
  --streak-ink: #B45309;
  --streak-icon: #D97706;

  /* 9. 7-Subject Identity Palette (Toán, Văn, Anh, Lý, Hóa, Sinh, Tin) */
  --subject-math: #2563EB;
  --subject-math-bg: #EFF6FF;
  --subject-math-border: #BFDBFE;

  --subject-literature: #E11D48;
  --subject-literature-bg: #FFF1F2;
  --subject-literature-border: #FECDD3;

  --subject-english: #DB2777;
  --subject-english-bg: #FDF2F8;
  --subject-english-border: #FBCFE8;

  --subject-physics: #D97706;
  --subject-physics-bg: #FFFBEB;
  --subject-physics-border: #FDE68A;

  --chemistry: #7C3AED;
  --chemistry-bg: #F5F3FF;
  --subject-chemistry: #7C3AED;
  --subject-chemistry-bg: #F5F3FF;
  --subject-chemistry-border: #DDD6FE;

  --subject-biology: #059669;
  --subject-biology-bg: #ECFDF5;
  --subject-biology-border: #A7F3D0;

  --subject-informatics: #4F46E5;
  --subject-informatics-bg: #EEF2FF;
  --subject-informatics-border: #C7D2FE;

  /* 10. Auth & Editorial Story Tokens */
  --auth-sky: #E8F1FF;
  --auth-sky-deep: #D8E8FF;
  --auth-haze: #F8FAFC;
  --auth-cobalt: #1E40AF;
  --auth-soft-green: #A7F3D0;
  --auth-leaf: #059669;
  --auth-peach: #FDBA74;
  --auth-hair: #1E293B;
  --auth-wood: #D9B490;
  --auth-illustration-shadow: rgba(15, 23, 42, 0.06);

  /* 11. Spatial Scale, Radii & Tactile Motion */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --sidebar-width: 248px;
  --topbar-height: 60px;
  --content-width: 1560px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --motion: 200ms;

  /* Legacy Alias Mappings */
  --bg: var(--bg-canvas);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-default);

  font-family: var(--font-body);
  font-size: 14px;
  font-synthesis: none;
  color: var(--text-primary);
}