/* Design tokens — docs/01-requirements.md §7: "define CSS custom properties for
   colour, spacing, radius, and type scale in one file. No magic numbers scattered
   in components." Swap these values, not the component CSS, to reskin the site. */
:root {
  /* Colour — deep navy + warm coral-orange. Deliberately not blue+teal or
     purple+yellow (avoid looking like existing hospitality job boards).
     Light is the bare/default palette (docs/08-backlog.md P0: "default theme
     should be Light") — dark is the explicit [data-theme="dark"] override below,
     so any render that happens before/without data-theme still shows Light,
     never Dark. App.razor stamps data-theme server-side from the theme cookie
     on every request; this default only matters as a safety net. */
   --color-primary: #2b4f9e;
   --color-primary-dark: #1f3f85;
   --color-primary-light: #e8efff;
   --color-accent: #f2c43b;
   --color-accent-dark: #d9ad2a;
   --color-interactive: #2f62c2;

   --color-bg: #f7f9ff;
   --color-bg-subtle: #edf2fd;
   --color-surface: #ffffff;
   --color-border: #d4def1;

   --color-text: #1d2d4d;
   --color-text-muted: #63779b;
   --color-text-on-primary: #ffffff;

   --color-chip-bg: #edf2ff;
   --color-chip-text: #486095;
   --color-badge-source: #e5eeff;
   --color-badge-source-text: #3158ad;

   --color-featured-bg: #fff8dc;
   --color-featured-border: #f2dd9a;
   --color-featured-text: #5f4c14;

  /* Type */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;

  /* Spacing. 1-4 stay fixed (small enough to not need scaling); 5-8 are fluid
     via clamp() so section/hero padding tightens on narrow phones automatically
     instead of every component needing its own mobile media query. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: clamp(16px, 4vw, 24px);
  --space-6: clamp(20px, 5vw, 32px);
  --space-7: clamp(28px, 6vw, 48px);
  --space-8: clamp(36px, 8vw, 64px);

  /* Radius + shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
   --shadow-sm: 0 1px 3px rgba(22, 44, 80, 0.06);
   --shadow-md: 0 8px 22px rgba(22, 44, 80, 0.1);

  --header-height: 68px;
  --content-max-width: 1180px;
}

:root[data-theme="dark"] {
   --color-primary: #223760;
   --color-primary-dark: #172746;
   --color-primary-light: #1f2b42;
   --color-accent: #f08a5d;
   --color-accent-dark: #cf6f46;
   --color-interactive: var(--color-accent);

   --color-bg: #151923;
   --color-bg-subtle: #1b2130;
   --color-surface: #1f2636;
   --color-border: #2d3648;

   --color-text: #e5eaf3;
   --color-text-muted: #9ba7bd;
   --color-text-on-primary: #ffffff;

   --color-chip-bg: #273043;
   --color-chip-text: #c1cada;
   --color-badge-source: #202946;
   --color-badge-source-text: #9fb0ff;

   --color-featured-bg: #31261d;
   --color-featured-border: #5a4030;
   --color-featured-text: #efe3d2;

   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
   --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
}