:root {
  /* ---- Color ----
     Deep-navy / gold system taken from the MYTHCON mark (royal-blue wordmark,
     gold roundel). Only these tokens define colour — never hard-code hex/rgb
     elsewhere; use var(--token) or rgba(var(--brand-rgb), a). */
  --brand: #132a6b;
  --brand-700: #0d1f52;
  --brand-900: #081437;
  --brand-tint: #e4e9f6;
  --brand-rgb: 19, 42, 107;
  --navy-rgb: 8, 20, 55;

  --navy-950: #081437;
  --navy-900: #0d1c4a;
  --navy-800: #142a63;
  --navy-700: #1c3676;
  --charcoal-900: #0c1330;
  --ink: #111a36;
  --paper: #f4f6fb;
  --paper-dim: #e8ecf6;
  --hero-a: #e9eef9;
  --hero-b: #f6f8fd;
  --line: #dbe0ee;
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --grey-600: #454d6b;
  --grey-500: #656d8c;
  --grey-300: #a3aac4;
  --white: #ffffff;

  --gold: #f2b01e;
  --gold-600: #a87900;
  --gold-hover: #ffc73a;
  --gold-tint: #fdf0c9;
  --whatsapp: #178a45;
  --whatsapp-hover: #12743a;
  --alert: #ee7d72;
  --data-primary: #8ea0e8;

  /* Status colours (admin panel) */
  --ok: #1f7a52;
  --ok-tint: #ddf2e7;
  --danger: #b3392b;
  --danger-rgb: 179, 57, 43;
  --danger-tint: #fbe5e1;

  /* Category tints for fallback service tiles (tone 1 = brand) */
  --tone-2-a: #2d6a8a;
  --tone-2-b: #1c3d5a;
  --tone-3-a: #4b4f9a;
  --tone-3-b: #2b2e66;
  --tone-4-a: #2f7a86;
  --tone-4-b: #1b4650;
  --tone-5-a: #5a5f8f;
  --tone-5-b: #333758;
  --tone-6-a: #3f6a5f;
  --tone-6-b: #233f3a;

  --on-dark-ink: #eef1f8;
  --on-dark-muted: #a9b4d8;

  /* ---- Type ---- */
  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-hero: clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  --fs-body: 0.975rem;
  --fs-small: 0.85rem;
  --fs-micro: 0.72rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: clamp(4.5rem, 3.5rem + 4vw, 8rem);
  --space-3xl: clamp(6rem, 4rem + 8vw, 11rem);

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* ---- Shape ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --hairline: 1px;
  --shadow-card: 0 16px 32px -16px rgba(var(--navy-rgb), 0.3), 0 2px 6px rgba(var(--navy-rgb), 0.06);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 360ms;
  --duration-slow: 720ms;

  color-scheme: light;
}