/* css/tokens.css */
:root {
  --bg-app: #1A1A21;
  --bg-surface: #23232B;
  --bg-surface-raised: #2C2C35;
  --bg-overlay: rgba(11, 11, 13, 0.72);
  --bg-nav: rgba(23, 23, 27, 0.82);

  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-raised: rgba(255, 255, 255, 0.075);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-blur: 24px;
  --opaque-surface: #17171D;

  --text-primary: #F5F5F7;
  --text-secondary: #9A9AA5;
  --text-tertiary: #6B6B75;
  --text-inverse: #0B0B0D;

  --accent-primary: #8C8CE8;
  --accent-primary-dim: #4A4A80;
  --accent-gold: #F2C94C;
  --accent-gold-dim: #7A6224;

  --state-success: #4ADE80;
  --state-success-dim: #1E4430;
  --state-danger: #F16A6A;
  --state-danger-dim: #4A2424;
  --state-track: #26262C;

  --cat-blue-bg: #2E4256;
  --cat-blue-icon: #5B9BD5;
  --cat-amber-bg: #4A3A1C;
  --cat-amber-icon: #E8A13A;
  --cat-maroon-bg: #4A2626;
  --cat-maroon-icon: #E26565;
  --cat-green-bg: #1F4436;
  --cat-green-icon: #4ADE9A;
  --cat-indigo-bg: #2A2550;
  --cat-indigo-icon: #6C5CE7;
  --cat-gray-bg: #35353B;
  --cat-gray-icon: #C4C4CC;
  --cat-brown-bg: #3A2A26;
  --cat-brown-icon: #C97B5A;
  --cat-slate-bg: #2E2B45;
  --cat-slate-icon: #8E85C2;
  --cat-teal-bg: #1E3F3D;
  --cat-teal-icon: #45C4B8;
  --cat-rose-bg: #40222F;
  --cat-rose-icon: #E0669A;
  --cat-olive-bg: #3A3A1E;
  --cat-olive-icon: #C9C24A;
  --cat-forest-bg: #1E331E;
  --cat-forest-icon: #6ABE6A;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --icon-2xs: 12px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 28px;
  --icon-xl: 36px;
  --icon-2xl: 48px;

  --font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;

  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --nav-height: 62px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}