/* Cunard Pharmacy — design tokens · SINGLE SOURCE OF TRUTH for brand
   BRAND-VERSION: 2026-07-01
   Every page imports ONLY this file for brand values. Reference token NAMES, never raw hex.
   Ported from docs/design-system.md (canonical brand spec) + the live ad-landing artifact.
   2026-07-01: semantic aliases + motion + pill tokens lifted verbatim from the shipped
   /weight-loss page (the validated design language) so all pages share its exact treatments. */

/* Webfonts — IvyPresto Display via Adobe Fonts kit sud1ppp (Joe's); Playfair = kept fallback; Hanken body. */
@import url("https://use.typekit.net/sud1ppp.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  /* ---- Color · gold = ACCENT ONLY (no large gold text blocks) ---- */
  --color-black:    #0b0b0b;  /* Rich Black — headings on light, dark section bg */
  --color-charcoal: #1a1a1a;  /* Soft black */
  --color-white:    #ffffff;
  --color-ivory:    #f1ead9;  /* Warm Ivory — the ONE warm bg (legacy #f8f5ef is DEAD; never pair) */
  --color-graphite: #2b2b2b;  /* Body text */
  --color-grey:     #6f6f6f;  /* Legacy muted grey (kept for reference) */
  --color-warm-slate: #4c4842; /* Muted text 2026-07-10 — richer than grey, warm not washed */
  --color-gold:     #c8a24a;  /* Muted Gold — accent: book pill, hairline top edge, eyebrows */
  --color-gold-dark:#a77c24;  /* Antique Gold — hover */
  --color-border:   #e8e2d6;  /* Warm Grey — ALL hairlines */

  /* ---- Type ----
     Headings: IvyPresto Display (Adobe slug ivypresto-display) → Playfair Display fallback (KEEP enabled).
     Body: Manrope (self-hosted, donor: Sol original experiment — Joe 2026-07-18 matched the
     donor typography exactly; Hanken Grotesk dropped from the stack, its Google import stays). */
  --font-display: "ivypresto-display", "IvyPresto Display", "Playfair Display", Georgia, serif;
  --font-body:    "Manrope Local", "Manrope", "Helvetica Neue", Arial, sans-serif; /* donor stack —
     the ↗ glyph intentionally falls back to Helvetica Neue's thin arrow (Manrope subset lacks it) */

  /* Scale ported 2026-07-14 from the Sol original experiment (Joe: "combination of the
     typography from the original experiment, but adding some of these gold words").
     Donor: .display 60→118/0.9, .title-xl 51→92/0.96, .title-lg 42→72/1.0, .title-md 31→48/1.04,
     lede 18→21/1.58, tracking −0.037em, headings weight 400. Pre-port values in git-less
     history: CHANGELOG 2026-07-14. */
  --hero-h1:    clamp(3rem, 6vw, 5.25rem);        /* 48 → 84px — inner-page heroes */
  --heading-xl: clamp(2.375rem, 4.4vw, 4.25rem);  /* 38 → 68px */
  --heading-l:  clamp(1.875rem, 3vw, 2.875rem);   /* 30 → 46px */
  --heading-m:  clamp(1.375rem, 2.2vw, 1.75rem);  /* 22 → 28px */
  --text-large: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); /* 18 → 21px lede */
  --text-base:  1rem;
  --text-small: 0.875rem;
  --eyebrow:    0.6875rem;     /* 11px uppercase tracked */
  --line-tight: 0.96;          /* display/hero headings (donor tiers 0.9–1.04) */
  --line-snug:  1.2;           /* sub-headings */
  --line-body:  1.62;
  --tracking-eyebrow: 0.11em;
  --tracking-tight:  -0.037em; /* display headings */
  --weight-body:     400;
  --weight-medium:   500;      /* ALL display headings — IvyPresto resolves to its 400 face;
                                  NEVER let headings default to browser bold (700 = chunky, off-brand) */
  --weight-semibold: 600;

  /* ---- Semantic aliases (from the shipped /weight-loss page) ---- */
  --surface-page:  var(--color-white);
  --surface-warm:  var(--color-ivory);
  --surface-dark:  var(--color-black);
  --text-heading:  var(--color-black);
  --text-body:     var(--color-graphite);
  --text-muted:    var(--color-warm-slate);
  --text-on-dark:  var(--color-ivory);   /* IVORY on dark sections, never pure white */
  --text-on-dark-muted: #b9b2a4;         /* warm muted on dark (from /weight-loss) */
  --accent:        var(--color-gold);
  --accent-hover:  var(--color-gold-dark);

  /* ---- Motion (from the shipped /weight-loss page) ---- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 220ms;

  /* ---- Spacing · 8-pt scale (spacing INSIDE a component ≤ spacing BETWEEN components) ---- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px;             /* card padding */
  --space-2xl: 48px;            /* MOBILE section padding-y */
  --space-3xl: 64px;            /* TABLET section padding-y */
  --space-4xl: 96px;            /* DESKTOP section padding-y */
  --section-pad-y: var(--space-4xl); /* uniform contract; never re-decided per section */

  /* ---- Shape · editorial = SHARP. "Option D" card: radius 0, no shadow, 2px gold top, 1px hairline sides.
     ONE exception (from /weight-loss): the gold primary-action PILL is fully rounded. ---- */
  --radius: 0;
  --radius-pill: 999px;
  --card-edge: 2px;
  --hairline: 1px;

  /* ---- Layout ---- */
  --max: 1180px;
  --header-h: 76px;
}

@media (max-width: 991px) { :root { --section-pad-y: var(--space-3xl); } } /* tablet */
@media (max-width: 767px) { :root { --section-pad-y: var(--space-2xl); } } /* mobile */

@font-face {
  font-family: "Manrope Local";
  src: url("/brand/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

/* ---- Base bindings so a page just needs to import this file ---- */
body { font-family: var(--font-body); color: var(--color-graphite); line-height: var(--line-body);
  font-size: 1.0625rem; } /* donor body 17px desktop */
@media (max-width: 767px) { body { font-size: 1.03125rem; } } /* donor 16.5px mobile */
h1, h2, h3, .display { font-family: var(--font-display); color: var(--text-heading);
  line-height: var(--line-tight); font-weight: var(--weight-body); /* donor: display weight 400;
  never let headings default to browser bold (700 = chunky, off-brand) */
  letter-spacing: var(--tracking-tight); }
.eyebrow { font-family: var(--font-body); font-size: var(--eyebrow); text-transform: uppercase;
           letter-spacing: var(--tracking-eyebrow); color: var(--color-gold); font-weight: 700; }

/* ---- Italic-emphasis device (Joe's) · italics highlight key words in HEADERS ----
   Use <em> inside a heading, e.g.  <h2 class="display">Pharmacist-led <em>weight loss</em> at Cunard.</h2>
   2026-07-14: h1/h2 ems now carry the E2 gold-accent treatment (antique gold on light;
   site.css flips to muted gold on dark surfaces). h3 ems stay ink. */
h1 em, h2 em, h3 em, .display em { font-style: italic; }
h1 em, h2 em, .display em { color: var(--accent-hover); }