/* ==========================================================================
   Dr. Nardus Visser — Design Tokens
   Comprehensive Family Healthcare · Kinross & Secunda, Mpumalanga
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');

/* --- Webfont substitution flag ---------------------------------------------
   "Amsterdam 4" (Måns Grebäck) is a commercial calligraphic display face.
   Pinyon Script is loaded as the closest free equivalent (formal copperplate
   script, same upright slope and looped descenders). Replace via the
   --font-display variable when the licensed Amsterdam 4 file is available.
   --------------------------------------------------------------------------- */

:root {
  /* ---------- Brand colors ---------- */
  /* Primary — pulled from the rose/magenta in the heart-and-flowers mark */
  --rose-50:  #fdf2f5;
  --rose-100: #fbe4eb;
  --rose-200: #f6c7d6;
  --rose-300: #ee9bb6;
  --rose-400: #e26a91;
  --rose-500: #d3406f;   /* primary rose */
  --rose-600: #b9295a;   /* primary rose, pressed */
  --rose-700: #971f4a;
  --rose-800: #781a3e;
  --rose-900: #5d1733;

  /* Blush — softer pink from the buds */
  --blush-50:  #fff5f7;
  --blush-100: #ffe4ea;
  --blush-200: #ffc9d4;
  --blush-300: #ffa3b6;
  --blush-400: #ff7d96;
  --blush-500: #ff5277;

  /* Sage — leaves; muted, clinical green */
  --sage-50:  #f3f6f2;
  --sage-100: #e2ebe0;
  --sage-200: #c5d6c1;
  --sage-300: #9cb697;
  --sage-400: #739572;   /* primary sage */
  --sage-500: #5a7a5b;
  --sage-600: #466144;
  --sage-700: #364c35;
  --sage-800: #283827;

  /* Saffron — small accent from the orange flowers in the mark */
  --saffron-300: #f3c98a;
  --saffron-500: #e89b3a;

  /* Neutrals — warm-cool blend, leaning toward off-white paper */
  --ink-950: #111111;    /* primary type */
  --ink-900: #1a1a1a;
  --ink-800: #2a2a2a;
  --ink-700: #3d3d3d;
  --ink-600: #5a5a5a;
  --ink-500: #7a7a7a;    /* secondary type */
  --ink-400: #a0a0a0;    /* tertiary / disabled */
  --ink-300: #c8c8c8;
  --ink-200: #e2e2e2;    /* hairlines */
  --ink-100: #efefef;
  --ink-50:  #f7f7f6;    /* page tint */
  --paper:   #ffffff;    /* page */

  /* Semantic */
  --success: #4a7d52;
  --warning: #c97a2a;
  --danger:  #b9295a;    /* uses rose-600 */
  --info:    #4a6b7d;

  /* Foreground / background semantic tokens */
  --fg-1: var(--ink-950);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-4: var(--ink-400);
  --fg-on-rose: #ffffff;
  --fg-on-sage: #ffffff;

  --bg-1: var(--paper);
  --bg-2: var(--ink-50);
  --bg-3: var(--blush-50);
  --bg-tint-rose: var(--rose-50);
  --bg-tint-sage: var(--sage-50);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-950);

  --accent: var(--rose-500);
  --accent-hover: var(--rose-600);
  --accent-soft: var(--rose-100);

  /* ---------- Typography ---------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Pinyon Script', 'Amsterdam 4', 'Pinyon Script', cursive; /* SUB: Pinyon ≈ Amsterdam 4 */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights — Poppins family */
  --w-light: 300;     /* @kind font */
  --w-regular: 400;   /* @kind font */
  --w-medium: 500;    /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold: 700;      /* @kind font */

  /* Type scale (rem, base 16) */
  --fs-display-xl: 4.75rem; /* 76 — script hero accent */
  --fs-display-l:  3.5rem;  /* 56 */
  --fs-h1:         2.5rem;  /* 40 */
  --fs-h2:         2rem;    /* 32 */
  --fs-h3:         1.5rem;  /* 24 */
  --fs-h4:         1.25rem; /* 20 */
  --fs-body-l:     1.125rem;/* 18 */
  --fs-body:       1rem;    /* 16 */
  --fs-body-s:     0.9375rem;/* 15 */
  --fs-caption:    0.8125rem;/* 13 */
  --fs-eyebrow:    0.75rem; /* 12 — uppercase letter-spaced */

  --lh-tight: 1.1;    /* @kind font */
  --lh-snug: 1.25;    /* @kind font */
  --lh-base: 1.55;    /* @kind font */
  --lh-loose: 1.7;    /* @kind font */

  --tracking-tight: -0.01em;   /* @kind font */
  --tracking-base: 0;          /* @kind font */
  --tracking-wide: 0.08em;     /* @kind font */
  --tracking-eyebrow: 0.18em;  /* @kind font */

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 0;        /* @kind spacing */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */
  --sp-10: 8rem;    /* 128 */

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;     /* default card */
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17, 17, 17, 0.03);
  --shadow-2: 0 6px 16px -8px rgba(17, 17, 17, 0.10), 0 2px 4px rgba(17, 17, 17, 0.04);
  --shadow-3: 0 18px 40px -18px rgba(151, 31, 74, 0.18), 0 6px 12px -6px rgba(17, 17, 17, 0.06);
  --shadow-rose-glow: 0 0 0 6px rgba(211, 64, 111, 0.10);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */

  /* ---------- Layout ---------- */
  --container-narrow: 720px;            /* @kind spacing */
  --container: 1080px;                  /* @kind spacing */
  --container-wide: 1280px;             /* @kind spacing */
  --gutter: clamp(1rem, 4vw, 3rem);     /* @kind spacing */
}

/* ==========================================================================
   Semantic resets — apply to elements directly
   ========================================================================== */

html { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

/* Display script — for hero accents, signatures, marquees */
.display-script {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-display-xl);
  line-height: 1;
  color: var(--rose-500);
  letter-spacing: 0.01em;
}

/* Eyebrow — small uppercase label above headings */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rose-600);
}

/* Body */
p, .body { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-2); }
.body-lg { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--fg-2); }
.body-sm { font-size: var(--fs-body-s); line-height: var(--lh-base); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-base); color: var(--fg-3); }

/* Links */
a {
  color: var(--rose-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--rose-700); }

/* Code */
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }