/* tokens.css — design tokens. Dark slate SaaS palette from ui-ux-pro-max skill. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #0F172A;     /* page background */
  --bg-1: #1E293B;     /* cards, surfaces */
  --bg-2: #334155;     /* hover, elevated */
  --bg-3: #475569;     /* borders, dividers */

  /* Text */
  --text-0: #F8FAFC;   /* primary */
  --text-1: #CBD5E1;   /* secondary */
  --text-2: #94A3B8;   /* muted */
  --text-3: #64748B;   /* placeholder, disabled */

  /* Brand & status */
  --accent: #22C55E;
  --accent-hover: #16A34A;
  --info: #3B82F6;
  --warning: #F59E0B;
  --danger: #EF4444;
  --success: #22C55E;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --ring-focus: 0 0 0 3px rgba(34, 197, 94, 0.35);

  /* Typography — Fira Sans for everything, normal weights */
  --font-body: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: 2.5rem;     /* 40 px */
  --text-h1: 2rem;            /* 32 px */
  --text-h2: 1.5rem;          /* 24 px */
  --text-h3: 1.25rem;         /* 20 px */
  --text-body: 1rem;          /* 16 px */
  --text-small: 0.875rem;     /* 14 px */
  --text-xs: 0.75rem;         /* 12 px */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.6;

  /* Motion */
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-sticky: 10;
  --z-modal: 30;
  --z-toast: 40;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}