/* ─── Less-IT · Design Tokens ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* surfaces - dark theme (default) */
  --bg:       #0a0d14;
  --bg-1:     #111520;
  --bg-2:     #1a1f2e;
  --bg-3:     #242b3d;
  --border:   #2a3048;
  --border-2: #3b4260;

  /* text */
  --t1: #e8eaf2;
  --t2: #cfd3e0;
  --t3: #a0a8bc;
  --t4: #7e86a0;

  /* accent palette */
  --blue:   #3b82f6;
  --purple: #a855f7;
  --green:  #4ade80;
  --orange: #b8862e;
  --red:    #b35a5a;
  --cyan:   #22d3ee;
  --teal:   #14b8a6;
  --pink:   #ec4899;

  --blue-a:   rgba(59,130,246,.14);
  --purple-a: rgba(168,85,247,.14);
  --green-a:  rgba(74,222,128,.12);
  --orange-a: rgba(184,134,46,.12);
  --red-a:    rgba(179,90,90,.14);
  --cyan-a:   rgba(34,211,238,.12);
  --teal-a:   rgba(20,184,166,.12);
  --pink-a:   rgba(236,72,153,.12);

  --grad:      linear-gradient(135deg, #5248b8, #168a82);
  --grad-sec:  linear-gradient(135deg, #189088, #5248b8);
  --grad-warm: linear-gradient(135deg, #b8862e, #b35a5a);

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.25);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.35), 0 8px 10px -6px rgba(0,0,0,.25);

  /* nav */
  --nav-bg: rgba(10,13,20,.92);
  --nav-mobile-bg: rgba(10,13,20,.98);

  /* code */
  --code-bg:     #1e293b;
  --code-border:  #334155;
  --code-header:  #1a2332;
  --code-text:    #e2e8f0;
  --code-muted:   #94a3b8;
  --code-comment: #4ade80;

  /* type */
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* radii */
  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 9999px;

  /* sizing */
  --mw: 1200px;
  --mw-sm: 800px;
  --nav-h: 80px;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── Light Theme ── */
[data-theme="light"]{
  --bg:       #ffffff;
  --bg-1:     #f5f7fa;
  --bg-2:     #e9ecf2;
  --bg-3:     #dde1e9;
  --border:   #d1d5de;
  --border-2: #b8bfcc;

  --t1: #1a1d28;
  --t2: #3a3f50;
  --t3: #5a6074;
  --t4: #7a8094;

  --blue:   #2563eb;
  --purple: #9333ea;
  --green:  #16a34a;
  --orange: #96700f;
  --red:    #a04040;
  --cyan:   #0891b2;
  --teal:   #0d9488;
  --pink:   #db2777;

  --blue-a:   rgba(37,99,235,.1);
  --purple-a: rgba(147,51,234,.1);
  --green-a:  rgba(22,163,74,.08);
  --orange-a: rgba(150,112,15,.08);
  --red-a:    rgba(160,64,64,.08);
  --cyan-a:   rgba(8,145,178,.08);
  --teal-a:   rgba(13,148,136,.08);
  --pink-a:   rgba(219,39,119,.08);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);

  --nav-bg: rgba(255,255,255,.92);
  --nav-mobile-bg: rgba(255,255,255,.98);

  --code-bg:     #1e293b;
  --code-border:  #334155;
  --code-header:  #1a2332;
  --code-text:    #e2e8f0;
  --code-muted:   #94a3b8;
  --code-comment: #4ade80;
}