/**
 * tokens.css — design tokens ported from the TaskHolder Desktop design system
 * (source of truth: app repo src/styles/tokens.css + wireframe-specs.md §0).
 * Coral is signal, not decoration: step numbers, progress fills,
 * one primary CTA per view, active states. Everything else neutral.
 *
 * SINGLE THEME (owner revision 2026-07-11): the site ships DARK ONLY.
 * The light palette was removed and the OS `prefers-color-scheme` switch
 * disabled — these values are the former dark palette, now the default.
 */
:root {
  /* Surfaces */
  --bg-primary: #1e1e1e;
  --bg-surface: #2c2c2c;
  --bg-tertiary: #3a3a3a;

  /* Text */
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-tertiary: #8a8a8a;

  /* Borders */
  --border-color: #3a3a3a;
  --border-hover: #4d4d4d;

  /* Brand — dark-surface coral (brightened, slightly desaturated, anti-glare).
     Primary Dark (base coral) is the hover/active shade. */
  --primary: #ff9b76;
  --primary-dark: #ff7f50;
  --primary-light: #4a2b20;
  --primary-rgb: 255, 155, 118;

  /* Status */
  --success: #10b981;
  --danger: #ef4444;

  /* Full-bleed CTA band: raised surface (spec §1.8, dark treatment) */
  --band-bg: #2c2c2c;
  --band-text: #f5f5f5;
  --band-text-sub: #a0a0a0;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color);
  --shadow-lg: 0 10px 15px var(--shadow-color);
  --card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Spacing (4px base) + section rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --section-gap: 7.5rem; /* ~120px vertical rhythm between sections */

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Z-index */
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 2000;
  --z-toast: 4000;
  --z-tooltip: 5000;

  /* Motion — interaction-spec §0.1; no ad-hoc values anywhere */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
  --dur-hero: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --content-max: 75rem; /* 1200px */
  --nav-height: 3.25rem; /* ~70% of the original 4.5rem nav */

  color-scheme: dark;
}