/* =========================================================
   SPARQ HEALTH — Colors & Type Foundation
   ---------------------------------------------------------
   The brand runs on a monochromatic + sage + dusty-blue
   palette. Type is editorial: MAK (a high-contrast
   display serif) paired with Tenor Sans (a refined,
   slightly humanist sans). All-lowercase is a signature
   move in display type; section eyebrows use UPPERCASE
   wide tracking.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Italiana&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&display=swap');

/* ---------- Webfonts ----------
   NOTE: MAK is LOGO-ONLY. Never use it for headings, body, or UI.
   Tenor Sans is our primary typeface — loaded from Google Fonts because
   the supplied "TenorSans-Regular.ttf" file was mislabeled (it contained
   a different slab-serif display font, not Tenor Sans). Cormorant
   Garamond and Italiana also come from Google Fonts above.
*/
@font-face {
  font-family: "MAK";
  src: url("../fonts/MAK.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================
     PALETTE — exact hexes from the brand color codes card
     ===================================================== */
  --sparq-white:        #ffffff;  /* page base */
  --sparq-bone:         #eaeaee;  /* soft neutral — cards, rules, dividers */
  --sparq-sage:         #7abda9;  /* primary accent — the "alive" color */
  --sparq-blue:         #657fa7;  /* secondary accent — dusty, clinical blue */
  --sparq-black:        #000000;  /* ink */

  /* Extended monochrome ramp (derived from #eaeaee → #000) */
  --sparq-ink-95:       #0a0a0b;
  --sparq-ink-85:       #1a1a1d;
  --sparq-ink-70:       #2d2d33;
  --sparq-ink-55:       #55555e;
  --sparq-ink-40:       #8a8a92;
  --sparq-ink-25:       #b8b8bf;
  --sparq-ink-15:       #d6d6dc;
  --sparq-ink-08:       #eaeaee;   /* = bone */
  --sparq-ink-04:       #f4f4f6;

  /* Extended accent ramps */
  --sparq-sage-deep:    #4f8b79;
  --sparq-sage-mid:     #7abda9;   /* = sage */
  --sparq-sage-soft:    #b7dacf;
  --sparq-sage-wash:    #e3efeb;

  --sparq-blue-deep:    #3f5579;
  --sparq-blue-mid:     #657fa7;   /* = blue */
  --sparq-blue-soft:    #a9bad3;
  --sparq-blue-wash:    #dde3ee;

  /* =====================================================
     SEMANTIC TOKENS
     ===================================================== */
  /* Surfaces */
  --bg:              var(--sparq-white);
  --bg-muted:        var(--sparq-ink-04);
  --bg-soft:         var(--sparq-bone);
  --bg-inverse:      var(--sparq-black);
  --bg-wash-sage:    var(--sparq-sage-wash);
  --bg-wash-blue:    var(--sparq-blue-wash);

  /* Foreground / text */
  --fg1:             var(--sparq-ink-95);   /* primary text */
  --fg2:             var(--sparq-ink-55);   /* secondary / captions */
  --fg3:             var(--sparq-ink-40);   /* meta / tertiary */
  --fg-inverse:      var(--sparq-white);
  --fg-accent:       var(--sparq-sage-deep);
  --fg-accent-cool:  var(--sparq-blue-deep);

  /* Lines */
  --line:            var(--sparq-ink-15);
  --line-strong:     var(--sparq-ink-70);
  --line-soft:       var(--sparq-ink-08);

  /* Focus + interactive */
  --focus-ring:      var(--sparq-sage-deep);

  /* =====================================================
     TYPE FAMILIES
     ===================================================== */
  /* MAK is reserved for the logo/wordmark only. Do not use in UI. */
  --font-logo:       "MAK", "Cormorant Garamond", Georgia, serif;
  /* H1 = Tenor Sans at display size (Option 1). H2 = Italiana (Option 2). */
  --font-display:    "Tenor Sans", "Optima", "Gill Sans", system-ui, sans-serif;
  --font-display-h2: "Italiana", Georgia, "Times New Roman", serif;
  --font-serif:      "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:       "Tenor Sans", "Optima", "Gill Sans", system-ui, sans-serif;
  --font-body:       "Tenor Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, monospace;

  /* =====================================================
     TYPE SCALE
     Rooted in editorial proportions. Display is SPACIOUS.
     ===================================================== */
  --fs-display-xl:   clamp(72px, 9.5vw, 156px);
  --fs-display-lg:   clamp(56px, 7vw, 112px);
  --fs-display-md:   clamp(44px, 5.5vw, 84px);
  --fs-display-sm:   clamp(36px, 4vw, 60px);

  --fs-h1:           clamp(40px, 4.4vw, 64px);
  --fs-h2:           clamp(30px, 3.2vw, 44px);
  --fs-h3:           clamp(22px, 2vw, 28px);
  --fs-h4:           18px;
  --fs-eyebrow:      12px;   /* uppercase tracked label */
  --fs-body:         17px;
  --fs-body-sm:      15px;
  --fs-caption:      13px;

  /* Line heights — editorial = generous */
  --lh-display:      0.92;
  --lh-heading:      1.08;
  --lh-body:         1.55;
  --lh-tight:        1.2;

  /* Tracking */
  --tr-display:      -0.015em;
  --tr-heading:      -0.005em;
  --tr-body:         0;
  --tr-eyebrow:      0.22em;
  --tr-caps:         0.12em;

  /* =====================================================
     SPACING — 4-based scale
     ===================================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 144px;

  /* =====================================================
     RADII — brand skews rectilinear/editorial.
     Cards are near-square; pills are only for buttons.
     ===================================================== */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 14px;      /* cards */
  --radius-pill: 999px;  /* buttons, tags */

  /* =====================================================
     ELEVATION — subtle, editorial. Never heavy.
     ===================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10,10,11,.04), 0 1px 1px rgba(10,10,11,.03);
  --shadow-2: 0 4px 14px rgba(10,10,11,.06), 0 1px 2px rgba(10,10,11,.04);
  --shadow-3: 0 18px 40px -14px rgba(10,10,11,.18), 0 4px 10px rgba(10,10,11,.05);
  --shadow-inner: inset 0 0 0 1px var(--line);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-slow: 700ms;
}

/* =========================================================
   BASE ELEMENT STYLES
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display / headline classes ---- */
.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: lowercase; /* signature — echoes the wordmark without using MAK */
  color: var(--fg1);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }
.display-sm { font-size: var(--fs-display-sm); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: 0.005em;
  text-transform: lowercase;
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-display-h2);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-transform: lowercase;
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
}

/* Sans-heading variant for when a display serif feels too editorial
   (product UI, dense screens, clinical dashboards). */
.h2-sans, .h1-sans {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--fg1);
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0 0 var(--sp-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg2);
  font-weight: 400;
  display: inline-block;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--fg2);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg3);
  letter-spacing: 0.01em;
}

.lede {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--fg1);
  font-style: italic;
}

blockquote, .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--fg1);
  border-left: 1px solid var(--sparq-sage-mid);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: var(--radius-2);
}

a {
  color: var(--fg1);
  text-decoration: none;
  border-bottom: 1px solid var(--fg1);
  padding-bottom: 1px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
a:hover {
  color: var(--sparq-sage-deep);
  border-bottom-color: var(--sparq-sage-deep);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--sparq-sage-soft);
  color: var(--sparq-ink-95);
}