/* ==========================================================================
   Design tokens — the single source of truth for colour, type and spacing.
   Brand colours are taken from the clinic logo: navy #1C3562, rose #DA2654.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------- */
  --navy-900: #0f1f3c;
  --navy-800: #16294d;
  --navy-700: #1c3562;
  --navy-600: #2a4a85;
  --navy-500: #3d62a6;

  --rose-700: #b71c44;
  --rose-600: #da2654;
  --rose-500: #ee4c74;
  --rose-100: #fce7ec;

  --blue-50: #f1f6fd;
  --blue-100: #eaf1fc;
  --blue-200: #dde6f5;
  --blue-300: #c9d8f0;

  /* --- Neutrals ------------------------------------------------------ */
  --ink: #14213d;
  --ink-muted: #5a6784;
  --ink-soft: #8494ae;
  --surface: #ffffff;
  --surface-alt: #f6f9fe;
  --border: #e3eaf6;
  --border-strong: #ccd8ec;

  /* --- Feedback ------------------------------------------------------ */
  --success: #0f7b5f;
  --success-soft: #e6f5f0;
  --danger: #c0203f;
  --danger-soft: #fdecef;

  /* --- Semantic aliases ---------------------------------------------- */
  --brand: var(--navy-700);
  --accent: var(--rose-600);
  --text: var(--ink);
  --text-muted: var(--ink-muted);

  /* --- Typography ----------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --text-xl: clamp(1.35rem, 0.8vw + 1.15rem, 1.6rem);
  --text-2xl: clamp(1.6rem, 1.4vw + 1.25rem, 2.1rem);
  --text-3xl: clamp(1.9rem, 2.2vw + 1.35rem, 2.75rem);
  --text-4xl: clamp(2.25rem, 3.4vw + 1.4rem, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.7;
  --tracking-wide: 0.12em;

  /* --- Spacing -------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --section-y: clamp(3.5rem, 6vw, 6rem);
  --gap-grid: clamp(1rem, 2vw, 1.75rem);

  /* --- Layout --------------------------------------------------------- */
  --container: 74rem; /* 1184px */
  --container-narrow: 56rem;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* --- Shape ---------------------------------------------------------- */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* --- Elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(20, 33, 61, 0.06);
  --shadow-sm: 0 2px 10px rgba(20, 33, 61, 0.06);
  --shadow-md: 0 10px 30px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 33, 61, 0.16);

  /* --- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 200ms;

  /* --- Depth ---------------------------------------------------------- */
  --z-header: 100;
  --z-nav-panel: 90;
  --z-skip: 200;
}