/* ==========================================================================
   SWK Properties — Design Tokens
   Dark theme: near-black structure + vivid ember/red-orange accent.
   Serif display type for editorial weight, clean sans for UI/body.
   ========================================================================== */

:root {
  /* ---- Color: Navy (structure — now the site's default background, not just hero/footer) ---- */
  --navy-950: #07090d;
  --navy-900: #0d1117;
  --navy-800: #141a23;
  --navy-700: #212a38;
  --navy-600: #333f52;

  /* ---- Color: Ember (accent, CTAs, highlights) ---- */
  --ember-600: #c23a20;
  --ember-500: #e8452c;
  --ember-400: #ff6b47;
  --ember-100: #ffd9cc;

  /* ---- Color: Cream / Sand (primary text on dark) ---- */
  --cream-50: #faf8f4;
  --cream-100: #f4efe6;
  --sand-200: #ece2cf;

  /* ---- Color: Slate (muted text on dark) ---- */
  --slate-900: #1a2130;
  --slate-700: #3c4657;
  --slate-500: #8a92a3;
  --slate-300: #aab2c0;
  --slate-100: #e4e8ee;

  --white: #ffffff;
  --success: #3ea373;
  --danger: #ff6b6b;

  /* ---- Semantic tokens (dark-first: every surface defaults to near-black) ---- */
  --color-bg: var(--navy-950);
  --color-surface: var(--navy-900);
  --color-surface-alt: var(--navy-800);
  --color-text: var(--cream-50);
  --color-text-muted: var(--slate-300);
  --color-text-on-dark: var(--cream-50);
  --color-text-on-dark-muted: var(--slate-300);
  --color-accent: var(--ember-500);
  --color-accent-hover: var(--ember-400);
  --color-border: var(--navy-700);
  --color-dark-surface: var(--navy-950);
  --color-dark-surface-alt: var(--navy-900);

  /* ---- Glassmorphism (frosted dark glass — used for the hero search bar) ---- */
  --glass-bg-dark: rgba(7, 9, 13, 0.55);
  --glass-bg-light: rgba(255, 255, 255, 0.06);
  --glass-border-dark: rgba(255, 255, 255, 0.12);
  --glass-border-light: rgba(255, 255, 255, 0.14);
  --glass-blur: 18px;

  /* ---- Typography ---- */
  --font-display: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-feature: 'Bodoni Moda', 'Playfair Display', Georgia, serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;

  /* ---- Spacing scale (8px grid, generous by design) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

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

  /* ---- Shadow (dark-on-dark: lean on borders/lighter surfaces for elevation, shadows stay subtle) ---- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.55);
  --shadow-accent-glow: 0 8px 28px rgba(232, 69, 44, 0.4);

  /* ---- Motion ---- */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  /* Clearance below the fixed top brand mark + floating dock (both small,
     overlaid elements now — there's no full-width navbar bar to size against). */
  --header-h: 104px;
  --header-h-scrolled: 104px;
}

/* The brand mark is enlarged on mobile (see .site-brand .brand-logo) —
   still taller than desktop's compact single row, so this needs bumping. */
@media (max-width: 767px) {
  :root {
    --header-h: 120px;
    --header-h-scrolled: 120px;
  }
}

/* Breakpoints (documented, used via raw px in media queries):
   sm: 480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px */