@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════
   CAREER OS — DESIGN TOKENS
   ═══════════════════════════════════════════ */

:root {
  /* Background layers */
  --bg:          hsl(228, 20%, 7%);
  --bg-2:        hsl(228, 18%, 10%);
  --surface:     hsl(228, 15%, 13%);
  --surface-2:   hsl(228, 13%, 17%);
  --surface-3:   hsl(228, 11%, 21%);

  /* Borders */
  --border:      rgba(255,255,255,0.07);
  --border-2:    rgba(255,255,255,0.13);
  --border-3:    rgba(255,255,255,0.20);

  /* Primary — violet */
  --primary:     hsl(252, 82%, 65%);
  --primary-dim: hsla(252, 82%, 65%, 0.14);
  --primary-glow:hsla(252, 82%, 65%, 0.35);

  /* Accent — emerald */
  --accent:      hsl(162, 76%, 48%);
  --accent-dim:  hsla(162, 76%, 48%, 0.14);

  /* Semantic */
  --amber:       hsl(38, 95%, 58%);
  --amber-dim:   hsla(38, 95%, 58%, 0.14);
  --rose:        hsl(355, 80%, 62%);
  --rose-dim:    hsla(355, 80%, 62%, 0.14);
  --sky:         hsl(200, 88%, 60%);
  --sky-dim:     hsla(200, 88%, 60%, 0.14);
  --green:       hsl(142, 71%, 50%);
  --green-dim:   hsla(142, 71%, 50%, 0.14);

  /* Text */
  --tx:   hsl(220, 16%, 94%);
  --tx-2: hsl(220, 10%, 66%);
  --tx-3: hsl(220, 8%,  44%);

  /* Skill palette — dark mode */
  --s-py-bg:  #111d2e; --s-py-tx:  #60a8f8; --s-py-pr: #3b82f6;
  --s-ds-bg:  #2a1010; --s-ds-tx:  #f87171; --s-ds-pr: #ef4444;
  --s-en-bg:  #0f2318; --s-en-tx:  #4ade80; --s-en-pr: #22c55e;
  --s-ma-bg:  #271c08; --s-ma-tx:  #fbbf24; --s-ma-pr: #f59e0b;
  --s-pr-bg:  #18143a; --s-pr-tx:  #a78bfa; --s-pr-pr: #8b5cf6;
  --s-in-bg:  #2a1020; --s-in-tx:  #f472b6; --s-in-pr: #ec4899;
  --s-sy-bg:  #082f49; --s-sy-tx:  #38bdf8; --s-sy-pr: #0ea5e9;

  /* Glassmorphism */
  --glass-bg:  rgba(255,255,255,0.04);
  --glass-bd:  rgba(255,255,255,0.08);
  --glass-blur:blur(24px);

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

  /* Spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full:9999px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.35);
  --shadow-md: 0 4px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.55);
  --shadow-glow: 0 0 40px var(--primary-glow);

  /* Nav dimensions */
  --sidebar-w:    240px;
  --bottomnav-h:  64px;

  /* Transitions */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg:         hsl(220, 22%, 96%);
  --bg-2:       hsl(220, 18%, 91%);
  --surface:    hsl(0, 0%, 100%);
  --surface-2:  hsl(220, 20%, 95%);
  --surface-3:  hsl(220, 18%, 90%);
  --border:     rgba(0,0,0,0.07);
  --border-2:   rgba(0,0,0,0.13);
  --border-3:   rgba(0,0,0,0.20);
  --tx:   hsl(220, 15%, 12%);
  --tx-2: hsl(220, 10%, 36%);
  --tx-3: hsl(220, 8%,  58%);
  --glass-bg: rgba(255,255,255,0.75);
  --glass-bd: rgba(0,0,0,0.08);
  --s-py-bg:#dbeafe; --s-py-tx:#1d4ed8; --s-py-pr:#2563eb;
  --s-ds-bg:#fee2e2; --s-ds-tx:#dc2626; --s-ds-pr:#ef4444;
  --s-en-bg:#dcfce7; --s-en-tx:#15803d; --s-en-pr:#16a34a;
  --s-ma-bg:#fef3c7; --s-ma-tx:#b45309; --s-ma-pr:#d97706;
  --s-pr-bg:#ede9fe; --s-pr-tx:#6d28d9; --s-pr-pr:#7c3aed;
  --s-in-bg:#fce7f3; --s-in-tx:#be185d; --s-in-pr:#db2777;
  --s-sy-bg:#e0f2f1; --s-sy-tx:#00796b; --s-sy-pr:#009688;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease);
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font); }

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

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-3); }