/* ==========================================================================
   Design tokens
   Layout / type / motion system measured from the reference build.
   Colour values are Allium Pharmaceuticals' own brand colours.
   ========================================================================== */

:root {
  /* ---------- Allium brand palette (from alliumpharmaceuticals.com) ---------- */
  --allium-blue: #235499;
  --allium-blue-bright: #306ec5;
  --allium-navy: #042551;
  --allium-mist: #e8edf5;
  --allium-blush: #f7b1ac;
  --allium-blush-200: #fadcda;
  --allium-blush-50: #fef4f4;
  --allium-slate-900: #1e293b;
  --allium-slate-700: #334155;
  --allium-slate-600: #475569;
  --white: #ffffff;

  /* ---------- Roles ---------- */
  --color-bg: var(--allium-mist);
  --color-surface: var(--white);
  --color-heading: var(--allium-slate-900);
  --color-text: var(--allium-slate-600);
  --color-strong: var(--allium-slate-900);
  --color-accent: var(--allium-blue);
  --color-accent-deep: var(--allium-navy);
  --color-line: rgba(30, 41, 59, 0.45);
  --color-line-soft: rgba(30, 41, 59, 0.16);
  --color-soft: rgba(35, 84, 153, 0.07);
  --color-backdrop: rgba(4, 37, 81, 0.45);
  --color-meta: rgba(30, 41, 59, 0.55);

  /* Section background colours used by the page-colour morph */
  --bg-hero: var(--allium-blue);
  --bg-shampoo: var(--allium-blue-bright);
  --bg-dry-bath: var(--allium-blush-200);
  --bg-perfume: var(--allium-blush);
  --bg-powder: var(--allium-blue);
  --bg-syrups: var(--allium-navy);
  --bg-sprays: var(--allium-blush-50);
  --bg-footer: var(--white);

  /* ---------- Typography ---------- */
  --ff-display: "GFS Neohellenic", "Iowan Old Style", Georgia, serif;
  --ff-soft: "Ysabeau Infant", "Optima", "Segoe UI", sans-serif;
  --ff-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(46px, 33.33px + 3.2vw, 76px);
  --fs-h2: clamp(38px, 28px + 2.2vw, 60px);
  --fs-h3: clamp(22px, 16px + 0.83vw, 28px);
  --fs-h4: clamp(20px, 18px + 0.28vw, 24px);
  --fs-statement: clamp(28px, 20px + 1.1vw, 36px);
  --fs-menu-title: clamp(28px, 22px + 0.97vw, 36px);
  --fs-eyebrow: clamp(15px, 14px + 0.14vw, 16px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-tiny: 11px;
  --fs-btn: 15px;
  --fs-nav: 12px;
  --fs-price: 32px;

  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-body: 1.4;
  --ls-wide: 0.1em;

  /* ---------- Layout ---------- */
  --container: 1540px;
  --container-large: 1280px;
  --container-medium: 1020px;
  --container-small: 760px;
  --page-pad: 16px;
  --section-pad: 64px;
  --header-h: 120px;
  --header-h-sticky: 96px;
  --logo-h: 38px;
  --logo-h-sticky: 32px;
  --gutter: 20px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 32px;
  --r-capsule: 900px;

  /* ---------- Borders, shadow, layers ---------- */
  --hairline: 0.5pt solid currentColor;
  --shadow: 0 12px 32px rgba(4, 37, 81, 0.08);
  --shadow-lg: 0 24px 60px rgba(4, 37, 81, 0.16);
  --z-content: 2010;
  --z-aside: 3010;
  --z-header: 5010;
  --z-top: 9010;

  /* ---------- Motion ---------- */
  --dur-1: 125ms;
  --dur-2: 187ms;
  --dur-3: 250ms;
  --dur-4: 375ms;
  --dur-5: 500ms;
  --ease-ui: ease-in-out;
  --ease-image: cubic-bezier(0, 0, 0.5, 1);
  --ease-line: cubic-bezier(0.4, 0, 0, 1);
  --hover-scale: 1.05;
}

@media (min-width: 768px) {
  :root {
    --page-pad: 32px;
    --section-pad: 96px;
    --header-h: 160px;
    --header-h-sticky: 110px;
    --logo-h: 46px;
    --logo-h-sticky: 38px;
  }
}

@media (min-width: 1025px) {
  :root {
    --page-pad: 48px;
    --section-pad: 120px;
    --header-h: 250px;
    --header-h-sticky: 150px;
    --logo-h: 58px;
    --logo-h-sticky: 46px;
    --fs-body: 14px;
    --fs-btn: 13px;
    --fs-price: 40px;
  }
}

/* Light text mode, used on dark section colours and over the hero photo. */
[data-theme="light"] {
  --color-heading: var(--white);
  --color-text: rgba(255, 255, 255, 0.78);
  --color-strong: var(--white);
  --color-line: rgba(255, 255, 255, 0.5);
  --color-line-soft: rgba(255, 255, 255, 0.24);
  --color-soft: rgba(255, 255, 255, 0.12);
  --color-meta: rgba(255, 255, 255, 0.65);
  --color-accent: var(--white);
}