/*
  Obesity Health Centre — design tokens
  Placeholder brand palette/logo — swap --brand-* values and /assets files
  when the client supplies real brand assets. Everything downstream
  (components, pages) reads only from these custom properties.
*/

/* Self-hosted variable font — avoids sending visitor data to a third-party
   font CDN (relevant given this site's POPIA/privacy commitments). */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: base ---------- */
  --ink: #16241F;              /* primary text, deep pine-ink (not pure black) */
  --ink-soft: #3C4A45;         /* secondary text */
  --paper: #F5F7F4;            /* page background, pale sage-white */
  --paper-raised: #FFFFFF;     /* card/surface background */

  --teal-deep: #1F4D46;        /* primary brand color */
  --teal-deep-hover: #17332F;
  --teal-deep-tint: #E4EEEC;   /* tinted surface for teal-deep */

  --teal-sage: #7FA89B;        /* secondary brand color */
  --teal-sage-tint: #EAF1EE;

  --signal-amber: #D9A441;     /* the Thread — reserved for progress/CTA accents only */
  --signal-amber-hover: #C08F31;
  --signal-amber-tint: #FBF0DC;

  --line: #DCE3DE;             /* hairline borders/dividers */
  --line-strong: #C3CEC8;

  /* ---------- Color: semantic ---------- */
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-bg: var(--paper);
  --color-surface: var(--paper-raised);
  --color-border: var(--line);
  --color-focus: var(--teal-deep);
  --color-link: var(--teal-deep);
  --color-link-hover: var(--teal-deep-hover);

  --color-brand: var(--teal-deep);
  --color-brand-hover: var(--teal-deep-hover);
  --color-brand-tint: var(--teal-deep-tint);
  --color-accent: var(--signal-amber);
  --color-accent-hover: var(--signal-amber-hover);
  --color-accent-tint: var(--signal-amber-tint);

  --color-disabled-bg: #E4E7E5;
  --color-disabled-text: #9AA5A0;

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

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid, mobile-first type scale: clamp(min, preferred, max) */
  --text-display:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);      /* hero headline */
  --text-h1:       clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --text-h2:       clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --text-h3:       clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-lead:     clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-body:     1.0625rem;                                  /* 17px */
  --text-small:    0.9375rem;                                  /* 15px */
  --text-caption:  0.8125rem;                                  /* 13px */
  --text-eyebrow:  0.8125rem;                                  /* 13px, uppercase+tracked */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --track-tight: -0.02em;
  --track-tighter: -0.03em;
  --track-normal: 0;
  --track-wide: 0.04em;
  --track-wider: 0.09em;

  --measure: 62ch; /* comfortable reading width for medical copy */

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 0.5rem;   /* 8  */
  --space-2: 0.75rem;  /* 12 */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.5rem;   /* 24 */
  --space-5: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-7: 4rem;     /* 64 */
  --space-8: 5.5rem;   /* 88 */
  --space-9: 8rem;     /* 128 */

  /* fluid section rhythm */
  --section-pad-y: clamp(3rem, 2.2rem + 3.5vw, 6rem);
  --section-pad-y-lg: clamp(4rem, 2.8rem + 5vw, 8rem);

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Shadow (soft, clinical-calm) ---------- */
  --shadow-sm: 0 1px 2px rgba(22, 36, 31, 0.06), 0 1px 1px rgba(22, 36, 31, 0.04);
  --shadow-md: 0 6px 16px rgba(22, 36, 31, 0.08), 0 2px 4px rgba(22, 36, 31, 0.04);
  --shadow-lg: 0 16px 40px rgba(22, 36, 31, 0.12), 0 4px 8px rgba(22, 36, 31, 0.05);
  --shadow-focus: 0 0 0 3px rgba(31, 77, 70, 0.28);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --header-h: 72px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.35s;
  --dur-slow: 0.6s;
}

/* Breakpoints (reference only — this is mobile-first, so base styles
   below ~640px are unprefixed; use these as min-width media queries):
   --bp-sm: 640px
   --bp-md: 768px
   --bp-lg: 1024px
   --bp-xl: 1280px
*/

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

p { margin: 0; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-link-hover); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---------- Utilities ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-brand);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  flex: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -48px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }