/* ═══════════════════════════════════════════════════════════
   BIYN LEARNING ACADEMY — DESIGN SYSTEM v2.1 TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Violet (logo: #7441BA) ── */
  --brand-50:  #F5F0FD;
  --brand-100: #E8DCFB;
  --brand-200: #D1B8F6;
  --brand-300: #B28DEE;
  --brand-400: #9464DE;
  --brand-500: #7441BA;
  --brand-600: #5E349A;
  --brand-700: #48287A;
  --brand-800: #331C5C;
  --brand-900: #201240;

  /* ── Accent Or (logo: #F4B700) ── */
  --accent-50:  #FFFAEB;
  --accent-100: #FFF0C4;
  --accent-200: #FFE28A;
  --accent-300: #FFD24E;
  --accent-400: #F4B700;
  --accent-500: #D9A200;
  --accent-600: #B58600;
  --accent-700: #8C6800;

  /* ── Surfaces (Light) ── */
  --surface-0:      #FAFAFC;
  --surface-1:      #F4F3F8;
  --surface-2:      #ECEAF2;
  --surface-3:      #E0DDE9;
  --surface-raised: #FFFFFF;
  --surface-overlay: rgba(32, 18, 64, 0.04);

  /* ── Text ── */
  --text-primary:   #1C1833;
  --text-secondary: #564E6E;
  --text-tertiary:  #918BA8;
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--brand-500);
  --text-accent:    var(--accent-600);

  /* ── Borders ── */
  --border-default: #E4E1EE;
  --border-subtle:  #EEECF5;
  --border-strong:  #D4D0E0;
  --border-brand:   var(--brand-200);

  /* ── Danger (#ED364A) ── */
  --danger-50:  #FFF1F2;
  --danger-100: #FFE0E3;
  --danger-200: #FFBAC0;
  --danger-400: #F45468;
  --danger-500: #ED364A;
  --danger-600: #D42038;
  --danger-700: #B01930;

  /* ── Success (#2BA665) ── */
  --success-50:  #EEFBF3;
  --success-100: #D0F5E0;
  --success-200: #96E8B8;
  --success-400: #3BBF75;
  --success-500: #2BA665;
  --success-600: #1F8A52;
  --success-700: #177042;

  /* ── Warning ── */
  --warning-50:  #FFFAEB;
  --warning-100: #FEF0C7;
  --warning-200: #FDDF8E;
  --warning-400: #F7B538;
  --warning-500: #EEA218;
  --warning-600: #D48810;
  --warning-700: #AB6B0A;

  /* ── Info (#20A6D9) ── */
  --info-50:  #EEF9FD;
  --info-100: #D5F0FA;
  --info-200: #A6DFF5;
  --info-400: #38BBE8;
  --info-500: #20A6D9;
  --info-600: #1889B8;
  --info-700: #136E96;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(32,18,64,0.04);
  --shadow-sm:    0 1px 3px rgba(32,18,64,0.06), 0 1px 2px rgba(32,18,64,0.04);
  --shadow-md:    0 4px 8px -2px rgba(32,18,64,0.08), 0 2px 4px -2px rgba(32,18,64,0.04);
  --shadow-lg:    0 12px 20px -4px rgba(32,18,64,0.10), 0 4px 8px -4px rgba(32,18,64,0.04);
  --shadow-xl:    0 20px 32px -6px rgba(32,18,64,0.12), 0 8px 12px -6px rgba(32,18,64,0.04);
  --shadow-brand: 0 4px 16px rgba(116,65,186,0.22);
  --shadow-hover: 0 8px 24px rgba(32,18,64,0.10);

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ── Spacing (grille 4px) ── */
  --sp-0: 0;
  --sp-px: 1px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ── 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-normal: 250ms;
  --dur-slow: 400ms;

  /* ── Chart palette ── */
  --chart-1: #7441BA;
  --chart-2: #2BA665;
  --chart-3: #F4B700;
  --chart-4: #ED364A;
  --chart-5: #20A6D9;
  --chart-6: #B28DEE;
}

/* ══════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════ */
[data-theme="dark"] {
  --brand-50:  #1C1440;
  --brand-100: #281C58;
  --brand-200: #3E2C80;
  --brand-300: #5840A8;
  --brand-400: #7A5CD0;
  --brand-500: #9B7EEA;
  --brand-600: #B89EFF;
  --brand-700: #D1BCFF;
  --brand-800: #E8DCFB;
  --brand-900: #F5F0FD;

  --accent-50:  #1E1800;
  --accent-100: #332A00;
  --accent-200: #5C4A00;
  --accent-300: #997D00;
  --accent-400: #F4B700;
  --accent-500: #FFD24E;
  --accent-600: #FFE28A;

  --surface-0:      #0D0E22;
  --surface-1:      #121328;
  --surface-2:      #1A1C38;
  --surface-3:      #252748;
  --surface-raised: #16182E;
  --surface-overlay: rgba(0,0,0,0.35);

  --text-primary:   #F0EEF6;
  --text-secondary: #A8A3BE;
  --text-tertiary:  #625E80;
  --text-inverse:   #1C1833;
  --text-brand:     var(--brand-500);
  --text-accent:    var(--accent-500);

  --border-default: #2C2A4A;
  --border-subtle:  #1F2040;
  --border-strong:  #3A3860;
  --border-brand:   var(--brand-300);

  --danger-50:  #2D1018;
  --danger-100: #421620;
  --danger-400: #F87171;
  --danger-500: #FF8A98;
  --danger-600: #ED364A;
  --danger-700: #F45468;

  --success-50:  #0D2A1C;
  --success-100: #123D28;
  --success-400: #5AE09A;
  --success-500: #6EEAAA;
  --success-600: #2BA665;

  --warning-50:  #2A1E08;
  --warning-100: #3D2C0C;
  --warning-400: #FBBF24;
  --warning-500: #FBBF24;
  --warning-600: #EEA218;

  --info-50:  #0E1F2C;
  --info-100: #142D40;
  --info-400: #4CC8F0;
  --info-500: #60D4FA;
  --info-600: #20A6D9;

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.35);
  --shadow-md:    0 4px 8px rgba(0,0,0,0.35);
  --shadow-lg:    0 12px 20px rgba(0,0,0,0.35);
  --shadow-xl:    0 20px 32px rgba(0,0,0,0.4);
  --shadow-brand: 0 4px 20px rgba(155,126,234,0.25);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.35);

  --chart-1: #9B7EEA;
  --chart-2: #5AE09A;
  --chart-3: #FFD24E;
  --chart-4: #FF8A98;
  --chart-5: #60D4FA;
  --chart-6: #D1BCFF;
}