/* ==========================================================================
   Design tokens — Livrons Cleaning Services
   Change brand colours, fonts and spacing here; everything else reads from these.
   ========================================================================== */

:root {
  /* Brand */
  --color-navy: #0E2340;
  --color-navy-700: #16305A;
  --color-blue: #1B4F9C;
  --color-blue-700: #143D7A;
  --color-blue-50: #E3ECF8;
  --color-orange: #FD9800;
  --color-orange-600: #E08600;
  --color-orange-50: #FFEBD6;
  --color-orange-ink: #8A4B00;

  /* Neutrals (cool, biased toward the navy) */
  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EEF2F8;
  --color-border: #E1E6EE;
  --color-border-strong: #C9D2DF;
  --color-text: #0E2340;
  --color-text-muted: #4A5970;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #C9D5E6;

  /* Feedback */
  --color-success: #1E7F4F;
  --color-error: #B42318;
  --color-whatsapp: #25D366;

  /* Typography */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px */
  --fs-lg: 1.1875rem;   /* 19px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --fs-h1: clamp(2.6rem, 1.8rem + 4vw, 5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Spacing */
  --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;
  --space-16: 4rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: max(1rem, env(safe-area-inset-left, 0px));

  /* Layout */
  --container: 1200px;
  --header-h: 72px;

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(14, 35, 64, 0.06);
  --shadow-md: 0 12px 32px -16px rgba(14, 35, 64, 0.28);
  --shadow-lg: 0 24px 48px -20px rgba(14, 35, 64, 0.4);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 200ms;

  --z-header: 50;
  --z-float: 60;
  --z-modal: 100;
}