/* Visual DSA Engine — design tokens */
:root {
  /* Palette */
  --bg-0: #06060a;
  --bg-1: #0a0a12;
  --bg-2: #10101a;
  --bg-3: #16162340;
  --line: #1d1d2b;
  --line-2: #26263a;

  --ink-0: #f5f5fa;
  --ink-1: #d2d2df;
  --ink-2: #9a9ab0;
  --ink-3: #6a6a82;

  --gold: #f5c24c;
  --gold-2: #e6a627;
  --java: #f27522;
  --java-2: #d95d10;
  --amber-glow: 245 194 76;

  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #ef4444;
  --info: #60a5fa;

  --diff-easy: #22c55e;
  --diff-med:  #f5c24c;
  --diff-hard: #ef4444;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px -12px rgba(0,0,0,.8);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset;
  --glow-gold: 0 0 0 1px rgba(245,194,76,.35), 0 10px 30px -8px rgba(245,194,76,.3);
  --glow-java: 0 0 0 1px rgba(242,117,34,.4), 0 10px 30px -8px rgba(242,117,34,.35);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* Type */
  --font-sans: 'Instrument Sans', 'Söhne', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --nav-h: 68px;
  --container: 1240px;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('Instrument Sans'), local('Inter');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: local('Fraunces'), local('Playfair Display');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('JetBrains Mono'), local('Menlo');
}