/* =============================================================================
   LifeWave Design System — Color & Type Tokens
   Source: LW_VisualBrandGuide_26.pdf v1.0
   "Warmth without glare, clarity without perfection."
   ============================================================================= */

/* ---------- Webfonts (CoFo Sans → Inter fallback) ----------
   CoFo Sans is a paid foundry font (Contrast Foundry). LifeWave's brand spec
   names CoFo Sans as primary with Inter as web fallback. Inter and JetBrains
   Mono are loaded via Google Fonts in index.html — drop licensed CoFo Sans
   files into /fonts and re-add @font-face here to upgrade.
   (Local /fonts/*.woff2 stubs were corrupted — glyphs like "f" rendered as
    circled symbols. We use Google Fonts hosting until real files are added.) */

:root {
  /* =========================================================================
     COLOR — Primary brand
     ========================================================================= */
  --lw-brand-blue:  #215291;   /* PMS 7686 C — primary identity color */
  --lw-brand-teal:  #5DB1E2;   /* secondary identity / wave accent */

  /* Cool palette — used for gradients, surfaces, accents.
     Each pair is "full" + "LT" (light) per brand spec. */
  --lw-cobalt:        #023DB3;
  --lw-cobalt-light:  #7AACDB;
  --lw-blue:          #2B63AD;   /* X39 product blue */
  --lw-blue-light:    #9BC9DB;
  --lw-aqua:          #65BDBD;   /* Alavida */
  --lw-aqua-light:    #A1E7DC;
  --lw-slate:         #708F98;   /* Carnosine */
  --lw-slate-light:   #BDD4DC;
  --lw-purple:        #72017A;   /* Silent Nights */
  --lw-purple-light:  #B287BB;
  --lw-gray:          #9D9C9A;   /* Icewave */
  --lw-gray-light:    #D6DADB;

  /* Warm / product accents — use sparingly, mostly for product line marks */
  --lw-red:           #AC312E;   /* Energy */
  --lw-red-light:     #DBAFAE;
  --lw-maroon:        #902645;   /* X49 */
  --lw-maroon-light:  #D6A4B5;
  --lw-yellow:        #B19534;   /* Glutathione */
  --lw-yellow-light:  #FCD48F;
  --lw-green:         #027C16;   /* SP6 */
  --lw-green-light:   #A6CF73;
  --lw-pink:          #D95995;   /* Nirvana */

  /* =========================================================================
     COLOR — Semantic surfaces & text
     ========================================================================= */
  --lw-bg:            #FFFFFF;
  --lw-bg-soft:       #F4F7FB;   /* subtle cool-tinted off-white */
  --lw-bg-tint:       #EAF1F8;   /* light blue-tinted block bg */
  --lw-bg-ink:        #0E1B2E;   /* deep brand-blue-derived near-black */

  --lw-fg:            #0E1B2E;   /* primary text */
  --lw-fg-muted:      #4B5C77;   /* secondary text */
  --lw-fg-subtle:     #8194AE;   /* tertiary / captions */
  --lw-fg-on-dark:    #FFFFFF;
  --lw-fg-on-dark-muted: #BDD4DC;

  --lw-border:        #DDE5EE;
  --lw-border-strong: #B7C6D8;
  --lw-divider:       #ECF0F5;

  --lw-link:          var(--lw-brand-blue);
  --lw-link-hover:    #173E73;
  --lw-focus-ring:    color-mix(in oklch, var(--lw-brand-teal) 70%, white);

  /* =========================================================================
     GRADIENTS — Cool palette only (per brand spec)
     ========================================================================= */
  --lw-grad-brand:    linear-gradient(135deg, var(--lw-brand-blue) 0%, var(--lw-brand-teal) 100%);
  --lw-grad-cobalt:   linear-gradient(135deg, var(--lw-cobalt) 0%, var(--lw-cobalt-light) 100%);
  --lw-grad-aqua:     linear-gradient(135deg, var(--lw-aqua) 0%, var(--lw-aqua-light) 100%);
  --lw-grad-slate:    linear-gradient(135deg, var(--lw-slate) 0%, var(--lw-slate-light) 100%);
  --lw-grad-purple:   linear-gradient(135deg, var(--lw-purple) 0%, var(--lw-purple-light) 100%);
  --lw-grad-tri:      linear-gradient(135deg, var(--lw-cobalt) 0%, var(--lw-brand-teal) 50%, var(--lw-aqua-light) 100%);
  --lw-grad-quad:     linear-gradient(135deg, var(--lw-purple) 0%, var(--lw-cobalt) 33%, var(--lw-brand-teal) 66%, var(--lw-aqua-light) 100%);
  --lw-grad-spectrum: linear-gradient(110deg, #72017A 0%, #023DB3 28%, #215291 50%, #5DB1E2 72%, #A1E7DC 100%);

  /* =========================================================================
     TYPOGRAPHY
     Primary: CoFo Sans (paid). Web fallback: Inter. Mono: CoFo Sans Mono → JetBrains Mono.
     ========================================================================= */
  /* CoFo Sans intentionally NOT first in the stack: a broken/partial "CoFo Sans"
     font is present on some local systems and renders glyphs like "f" as circled
     symbols. When licensed CoFo Sans files are added via @font-face, prepend it. */
  --lw-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --lw-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — derived from brand spec (12pt body baseline → digital px).
     Spec ratios: H1 48pt, H2 26pt, H3 18pt, Lead-in 15pt, Body 12pt, Small 9.6pt, Fine 7.7pt.
     Translated to digital (×1.33 for px-from-pt convention): */
  --lw-size-display:  72px;   /* hero headlines, larger than spec for digital impact */
  --lw-size-h1:       56px;
  --lw-size-h2:       34px;
  --lw-size-h3:       22px;
  --lw-size-lead:     19px;
  --lw-size-body:     16px;
  --lw-size-small:    13px;
  --lw-size-fine:     11px;
  --lw-size-eyebrow:  12px;   /* CoFo Mono — eyebrow / category label */

  /* Line heights */
  --lw-lh-display:    1.02;
  --lw-lh-tight:      1.08;
  --lw-lh-snug:       1.18;
  --lw-lh-body:       1.55;
  --lw-lh-loose:      1.7;

  /* Tracking (letter-spacing) — spec uses tight tracking on H1, generous on small caps & mono.
     -12 → 0 on H1 = roughly -0.012em → 0. */
  --lw-track-tight:   -0.02em;
  --lw-track-normal:  0em;
  --lw-track-loose:   0.04em;
  --lw-track-eyebrow: 0.14em;   /* mono eyebrow / all-caps */
  --lw-track-fine:    0.05em;

  /* Font weights — CoFo Sans ships Thin/Regular/Medium per spec; we map: */
  --lw-weight-thin:    200;
  --lw-weight-regular: 400;
  --lw-weight-medium:  500;
  --lw-weight-semi:    600;

  /* =========================================================================
     SPACING — 8px base unit (digital). Spec: digital=8pt, print=10pt.
     Everything snaps to multiples of 8.
     ========================================================================= */
  --lw-space-1:  4px;    /* half-step, exception use only */
  --lw-space-2:  8px;
  --lw-space-3:  16px;
  --lw-space-4:  24px;
  --lw-space-5:  32px;
  --lw-space-6:  40px;
  --lw-space-7:  48px;
  --lw-space-8:  64px;
  --lw-space-9:  80px;
  --lw-space-10: 96px;
  --lw-space-11: 128px;

  /* =========================================================================
     RADII — soft but never playful. Cards & inputs are gently rounded.
     ========================================================================= */
  --lw-radius-xs:   4px;
  --lw-radius-sm:   8px;
  --lw-radius-md:   12px;
  --lw-radius-lg:   20px;
  --lw-radius-xl:   28px;
  --lw-radius-pill: 999px;

  /* =========================================================================
     SHADOWS — subtle, cool-tinted. Avoid harsh drop shadows.
     ========================================================================= */
  --lw-shadow-xs: 0 1px 2px rgba(33, 82, 145, 0.06);
  --lw-shadow-sm: 0 2px 8px rgba(33, 82, 145, 0.07), 0 1px 2px rgba(33, 82, 145, 0.04);
  --lw-shadow-md: 0 6px 20px rgba(33, 82, 145, 0.09), 0 2px 6px rgba(33, 82, 145, 0.05);
  --lw-shadow-lg: 0 20px 48px rgba(14, 27, 46, 0.12), 0 6px 16px rgba(33, 82, 145, 0.06);
  --lw-shadow-glow: 0 0 0 6px color-mix(in oklch, var(--lw-brand-teal) 22%, transparent);

  /* =========================================================================
     MOTION — calm, never bouncy. Eases that feel like light spreading.
     ========================================================================= */
  --lw-ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);   /* softLight — primary */
  --lw-ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --lw-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --lw-dur-fast:    160ms;
  --lw-dur-normal:  260ms;
  --lw-dur-slow:    480ms;
  --lw-dur-spread:  900ms;   /* sunflower fades, hero reveals */

  /* =========================================================================
     LAYOUT
     ========================================================================= */
  --lw-content-max:    1200px;
  --lw-content-narrow: 760px;
  --lw-grid-gutter:    32px;   /* 4× base */
  --lw-grid-margin:    64px;   /* 8× base on desktop */
}

/* =============================================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes (or use them as a reference for component-level CSS).
   ============================================================================= */

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

.lw-display, h1.lw-display {
  font-size: var(--lw-size-display);
  line-height: var(--lw-lh-display);
  letter-spacing: var(--lw-track-tight);
  font-weight: var(--lw-weight-medium);
  text-wrap: balance;
}
.lw-h1, h1 {
  font-size: var(--lw-size-h1);
  line-height: var(--lw-lh-tight);
  letter-spacing: var(--lw-track-tight);
  font-weight: var(--lw-weight-medium);
  text-wrap: balance;
  margin: 0 0 var(--lw-space-4);
}
.lw-h2, h2 {
  font-size: var(--lw-size-h2);
  line-height: var(--lw-lh-snug);
  letter-spacing: -0.01em;
  font-weight: var(--lw-weight-medium);
  margin: var(--lw-space-7) 0 var(--lw-space-3);
}
.lw-h3, h3 {
  font-size: var(--lw-size-h3);
  line-height: var(--lw-lh-snug);
  font-weight: var(--lw-weight-medium);
  margin: var(--lw-space-5) 0 var(--lw-space-2);
}
.lw-lead {
  font-size: var(--lw-size-lead);
  line-height: 1.5;
  color: var(--lw-fg-muted);
  font-weight: var(--lw-weight-regular);
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.lw-body, p {
  font-size: var(--lw-size-body);
  line-height: var(--lw-lh-body);
  margin: 0 0 var(--lw-space-3);
  text-wrap: pretty;
}
.lw-small  { font-size: var(--lw-size-small); letter-spacing: var(--lw-track-fine); }
.lw-fine   { font-size: var(--lw-size-fine);  letter-spacing: 0.06em; color: var(--lw-fg-subtle); }

/* Eyebrow — CoFo Mono, all-caps, generous tracking. Used above headlines as a category tag. */
.lw-eyebrow {
  display: inline-block;
  font-family: var(--lw-font-mono);
  font-size: var(--lw-size-eyebrow);
  font-weight: var(--lw-weight-medium);
  letter-spacing: var(--lw-track-eyebrow);
  text-transform: uppercase;
  color: var(--lw-brand-blue);
  margin: 0 0 var(--lw-space-3);
}

/* Quote — pull quote in CoFo Mono Medium, with hairline rule + large quote glyph */
.lw-quote {
  font-family: var(--lw-font-mono);
  font-weight: var(--lw-weight-medium);
  font-size: 28px;
  line-height: 1.35;
  color: var(--lw-fg);
  position: relative;
  padding-top: var(--lw-space-7);
  letter-spacing: -0.005em;
}
.lw-quote::before {
  content: "“";
  position: absolute;
  top: -28px; left: -8px;
  font-family: var(--lw-font-sans);
  font-size: 120px;
  line-height: 1;
  color: var(--lw-brand-teal);
  opacity: 0.4;
}
.lw-quote-cite {
  display: block;
  margin-top: var(--lw-space-3);
  padding-top: var(--lw-space-2);
  border-top: 1px solid var(--lw-border-strong);
  font-family: var(--lw-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-fg-muted);
}

a, .lw-link { color: var(--lw-link); text-decoration: none; transition: color var(--lw-dur-fast) var(--lw-ease-out); }
a:hover, .lw-link:hover { color: var(--lw-link-hover); }

::selection { background: color-mix(in oklch, var(--lw-brand-teal) 35%, white); color: var(--lw-fg); }
:focus-visible { outline: 2px solid var(--lw-focus-ring); outline-offset: 2px; border-radius: var(--lw-radius-xs); }