/* ============================================================
   Whimbli design tokens
   Drop this file into your CSS at the top of your stylesheet
   chain (before any component CSS). Everything in the prototype
   maps to these variables.

   Usage:
     color: var(--w-ink);
     background: var(--w-cream);
     font-family: var(--w-serif);
     padding: var(--w-section-py) var(--w-section-px);
   ============================================================ */

:root {
  /* ---------- Color: surface & ink ---------- */
  --w-navy:        #0d1230;   /* primary dark, hero bg */
  --w-navy-deep:   #080b22;   /* darker, used for footer / final CTA */
  --w-navy-soft:   #1a1f44;   /* lighter navy, used in radial gradients */
  --w-cream:       #f8f6f1;   /* main page background */
  --w-paper:       #f3f0e8;   /* alt background for alternating sections */
  --w-surface:     #ffffff;   /* cards, quote tiles, step tiles */
  --w-ink:         #1a1d2e;   /* primary text */
  --w-ink-soft:    #3a3d50;   /* secondary text, muted captions */

  /* ---------- Color: brand accent (purple/lavender) ---------- */
  --w-accent:      #8b7cf2;   /* primary accent — italic display words */
  --w-accent-deep: #6b5cd2;   /* CTAs, kickers on light bg */
  --w-accent-soft: #b8aef8;   /* italic on dark bg, glow effects */

  /* ---------- Color: secondary accent (use sparingly) ---------- */
  --w-copper:      #d99970;   /* warm secondary, optional */

  /* ---------- Status dots (platform module status) ---------- */
  --w-status-live: #3a7a4a;
  --w-status-beta: #a06a2a;
  --w-status-next: #3a3d5090; /* ink-soft at 56% — also: rgba(58,61,80,0.56) */

  /* ---------- Color: alpha scrims & borders ---------- */
  /* Use these as background tints over cream/paper. */
  --w-ink-border:    rgba(26, 29, 46, 0.06);   /* card border on cream */
  --w-ink-border-2:  rgba(26, 29, 46, 0.10);   /* section divider on cream */
  --w-ink-border-3:  rgba(26, 29, 46, 0.15);   /* stronger horizontal rule */
  --w-cream-border:  rgba(245, 241, 232, 0.20);/* divider on navy */
  --w-cream-border-strong: rgba(245, 241, 232, 0.40); /* button outline on dark */

  /* ---------- Typography ---------- */
  --w-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --w-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --w-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display sizes — used for hero/section headlines.
     These match the prototype 1:1. Scale them down for narrower
     viewports via clamp() (see overrides at the bottom of this file). */
  --w-fs-hero:        88px;   /* main hero h1 */
  --w-fs-display-xl:  64px;   /* big section h2 (Relief brand tagline) */
  --w-fs-display:     56px;   /* most section h2s */
  --w-fs-display-sm:  48px;   /* sub-headline (e.g. inside Relief) */
  --w-fs-h3:          24px;   /* card titles, step titles */
  --w-fs-quote:       22px;   /* serif italic body in quote tiles */
  --w-fs-body-lg:     17px;   /* lead paragraphs */
  --w-fs-body:        15px;   /* default body */
  --w-fs-small:       13.5px; /* small captions */
  --w-fs-kicker:      11px;   /* mono kicker label */
  --w-fs-button:      14px;   /* CTA button text */

  /* Letter spacing — display headlines */
  --w-ls-hero:    -0.025em;
  --w-ls-display: -0.022em;
  --w-ls-mono:     0.16em;   /* kicker / footer column header */

  /* Line height */
  --w-lh-display: 1.04;       /* tight, for big headlines */
  --w-lh-h2:      1.05;
  --w-lh-body:    1.6;
  --w-lh-quote:   1.45;

  /* ---------- Spacing ---------- */
  /* Section padding: vertical / horizontal on hero & body sections.
     The prototype is built at 1280px; on full-bleed wider viewports
     these still feel correct because content is constrained by max-width. */
  --w-section-py:        110px;
  --w-section-py-lg:     130px;  /* hero, manifesto closer */
  --w-section-px:        56px;
  --w-content-max:       1100px; /* 3-up grids, platform tiles */
  --w-prose-max:         720px;  /* paragraph readable width */
  --w-prose-narrow:      620px;  /* sub-paragraphs under a centered headline */

  /* Card */
  --w-card-padding:    28px;
  --w-card-radius:     12px;
  --w-card-radius-sm:  10px;

  /* Buttons */
  --w-btn-radius:    8px;
  --w-btn-padding:   14px 22px;
  --w-btn-padding-sm: 10px 18px;

  /* ---------- Effects ---------- */
  --w-shadow-cta:    0 0 0 1px rgba(139, 124, 242, 0.67), 0 8px 24px -8px rgba(139, 124, 242, 0.50);
  --w-shadow-glow:   0 0 18px rgba(139, 124, 242, 0.40); /* used on logo dot in dark nav */
}

/* ============================================================
   Helper classes — optional. If you'd rather use the variables
   directly in your existing CSS, ignore this block. These are
   here so a section can drop them on quickly:

     <h2 class="w-headline">…</h2>
     <span class="w-italic">…</span>
     <div class="w-kicker">…</div>
   ============================================================ */

.w-kicker {
  font-family: var(--w-mono);
  font-size: var(--w-fs-kicker);
  letter-spacing: var(--w-ls-mono);
  text-transform: uppercase;
  color: var(--w-accent-deep);
}

.w-kicker--on-dark {
  color: var(--w-accent-soft);
}

.w-headline {
  font-family: var(--w-serif);
  font-weight: 500;
  font-size: var(--w-fs-display);
  line-height: var(--w-lh-display);
  letter-spacing: var(--w-ls-display);
  color: var(--w-ink);
  text-wrap: balance;
  margin: 0;
}

.w-headline--xl  { font-size: var(--w-fs-display-xl); }
.w-headline--hero { font-size: var(--w-fs-hero); letter-spacing: var(--w-ls-hero); }

.w-headline--center {
  text-align: center;
  /* IMPORTANT: when using max-width with center alignment, also
     set margin: 0 auto so the BLOCK centers, not just the text.
     This was a bug we hit in the prototype. */
  margin-left: auto;
  margin-right: auto;
  max-width: 920px;
}

/* The defining brand mark: italic + lavender accent inside a headline. */
.w-italic {
  font-style: italic;
  color: var(--w-accent);
  font-weight: 500;
}
.w-italic--on-dark { color: var(--w-accent-soft); }

/* Buttons */
.w-btn {
  font-family: var(--w-sans);
  font-size: var(--w-fs-button);
  font-weight: 500;
  padding: var(--w-btn-padding);
  border-radius: var(--w-btn-radius);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  cursor: pointer;
}
.w-btn--primary {
  background: var(--w-accent-deep);
  color: #fff;
  box-shadow: var(--w-shadow-cta);
}
.w-btn--ghost {
  background: transparent;
  color: var(--w-ink);
  border: 1px solid var(--w-ink-border-3);
}
.w-btn--ghost-on-dark {
  background: transparent;
  color: var(--w-cream);
  border: 1px solid var(--w-cream-border-strong);
}
.w-btn--cream {
  background: var(--w-cream);
  color: var(--w-navy);
  font-weight: 600;
}

/* Section scaffolding */
.w-section {
  padding: var(--w-section-py) var(--w-section-px);
}
.w-section--hero {
  padding: 90px var(--w-section-px) var(--w-section-py-lg);
}
.w-section--cream { background: var(--w-cream); color: var(--w-ink); }
.w-section--paper { background: var(--w-paper); color: var(--w-ink); }
.w-section--navy  { background: var(--w-navy);  color: var(--w-cream); }
.w-section--navy-deep { background: var(--w-navy-deep); color: var(--w-cream); }

/* ============================================================
   NAV — appears at the top of every page (light variant)
   ============================================================ */
.w-nav {
  padding: 20px var(--w-section-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--w-cream);
  border-bottom: 1px solid var(--w-ink-border);
  position: relative;
  z-index: 5;
  font-family: var(--w-sans);
}
.w-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--w-ink);
}
.w-nav__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.w-nav__wordmark {
  font-family: var(--w-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--w-ink);
}
.w-nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.w-nav__links a {
  color: rgba(26, 29, 46, 0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.w-nav__links a:hover { color: var(--w-ink); }
.w-nav__links a[aria-current="page"] {
  color: var(--w-ink);
  border-bottom-color: var(--w-ink);
}
.w-btn--sm {
  padding: 10px 18px;
  font-size: 13px;
}

/* ============================================================
   PAGE HERO — top band for non-home pages.
   Cream-on-cream by default. Use --dark modifier for navy bands.
   ============================================================ */
.w-page-hero {
  background: var(--w-cream);
  color: var(--w-ink);
  padding: 90px var(--w-section-px) 60px;
  text-align: center;
  font-family: var(--w-sans);
}
.w-page-hero__inner { max-width: 1000px; margin: 0 auto; }
.w-page-hero__h1 {
  font-family: var(--w-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 18px auto 0;
  color: var(--w-ink);
  text-wrap: balance;
}
.w-page-hero__h1--xl { font-size: clamp(48px, 8vw, 84px); }
.w-page-hero__h1--lg { font-size: clamp(44px, 7vw, 72px); }
.w-page-hero__h1--md { font-size: clamp(40px, 6.5vw, 64px); }
.w-page-hero__lead {
  font-family: var(--w-sans);
  font-size: 17px;
  color: var(--w-ink-soft);
  max-width: 660px;
  margin: 24px auto 0;
  line-height: 1.6;
}
.w-page-hero--dark {
  background: linear-gradient(180deg, var(--w-navy), var(--w-navy-deep));
  color: var(--w-cream);
  padding: 80px var(--w-section-px) 90px;
}
.w-page-hero--dark .w-page-hero__h1 { color: var(--w-cream); }
.w-page-hero--dark .w-page-hero__lead { color: rgba(245, 241, 232, 0.75); }

/* CTA band — thin "Request early access" panel at the bottom of subpages. */
.w-cta-band {
  background: var(--w-paper);
  text-align: center;
  padding: 80px var(--w-section-px);
  border-top: 1px solid var(--w-ink-border-2);
  font-family: var(--w-sans);
}
.w-cta-band__h2 {
  font-family: var(--w-serif);
  font-weight: 500;
  font-size: var(--w-fs-display-sm);
  line-height: var(--w-lh-display);
  letter-spacing: var(--w-ls-display);
  margin: 18px auto 0;
  color: var(--w-ink);
  max-width: 760px;
  text-wrap: balance;
}
.w-cta-band__lead {
  font-size: 16px;
  color: var(--w-ink-soft);
  max-width: 580px;
  margin: 20px auto 0;
  line-height: 1.6;
}
.w-cta-band__cta { margin-top: 32px; display: inline-flex; }

/* ============================================================
   FOOTER — navy-deep, cream text, 4-col grid
   ============================================================ */
.w-footer {
  background: var(--w-navy-deep);
  color: rgba(245, 241, 232, 0.62);
  padding: 64px var(--w-section-px) 36px;
  font-family: var(--w-sans);
}
.w-footer__grid {
  max-width: var(--w-content-max);
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
}
.w-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.w-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--w-cream);
  text-decoration: none;
  width: fit-content;
}
.w-footer__brand-link img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.w-footer__brand-link span {
  font-family: var(--w-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--w-cream);
}
.w-footer__tag {
  font-size: 14px;
  line-height: 1.6;
  max-width: 280px;
  color: rgba(245, 241, 232, 0.55);
  margin: 0;
}
.w-footer__col-title {
  color: var(--w-cream);
  font-family: var(--w-mono);
  font-size: var(--w-fs-kicker);
  letter-spacing: var(--w-ls-mono);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.w-footer__col a {
  display: block;
  font-size: 14px;
  padding: 4px 0;
  color: rgba(245, 241, 232, 0.62);
  text-decoration: none;
  transition: color 0.2s;
}
.w-footer__col a:hover { color: var(--w-cream); }
.w-footer__bottom {
  max-width: var(--w-content-max);
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--w-cream-border);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(245, 241, 232, 0.42);
  gap: 16px;
}
.w-footer__bottom em {
  font-family: var(--w-serif);
  font-style: italic;
  color: rgba(245, 241, 232, 0.55);
}

/* ============================================================
   Responsive scaling
   The prototype is desktop-first at 1280px. These rules scale
   the display sizes down gracefully without breaking the rhythm.
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --w-fs-hero:       clamp(40px, 8vw, 64px);
    --w-fs-display-xl: clamp(36px, 7vw, 56px);
    --w-fs-display:    clamp(32px, 6vw, 48px);
    --w-fs-display-sm: clamp(28px, 5vw, 40px);
    --w-section-py:    72px;
    --w-section-py-lg: 90px;
    --w-section-px:    24px;
  }
  .w-nav { padding: 16px var(--w-section-px); }
  .w-nav__links { display: none; }
  .w-footer { padding: 48px var(--w-section-px) 28px; }
  .w-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .w-footer__bottom { flex-direction: column; gap: 8px; }
  .w-page-hero { padding: 60px var(--w-section-px) 40px; }
  .w-page-hero--dark { padding: 56px var(--w-section-px) 70px; }
  .w-cta-band { padding: 56px var(--w-section-px); }
}