/* ============================================================
   KWELITY — Responsive layout tokens
   ------------------------------------------------------------
   Defines CSS variables (--kw-*) that scale across breakpoints,
   so components don't have to know about screen sizes — they
   just read the vars. Covers ultra-wide (3000px+), desktop,
   tablet, and mobile.
   ============================================================ */

:root {
  /* Page-level horizontal padding */
  --kw-page-pad: 40px;

  /* Header */
  --kw-hdr-pad-y: 10px;
  --kw-hdr-logo-w: 200px;        /* wordmark lockup (left side) */
  --kw-hdr-chev-size: 32px;      /* left chevron mark */
  --kw-hdr-ai-fs: 11px;
  --kw-hdr-ai-pad: 7px 14px 7px 12px;
  --kw-hdr-ai-dot: 7px;
  --kw-hdr-nav-fs: 12px;
  --kw-hdr-nav-pad: 11px 16px;
  --kw-hdr-gap: 28px;
  --kw-hdr-cta-fs: 12px;
  --kw-hdr-cta-pad: 14px 26px;

  /* Announcement bar */
  --kw-ann-pad-y: 18px;
  --kw-ann-fs: 14px;
  --kw-ann-eyebrow-fs: 11px;

  /* Footer (halved from original) */
  --kw-ft-pad-top: 56px;
  --kw-ft-pad-bot: 20px;
  --kw-ft-logo: 48px;
  --kw-ft-row-gap: 40px;
  --kw-ft-strip-mt: 44px;
  --kw-ft-strip-pt: 14px;
  --kw-ft-avatar: 28px;

  /* Visibility helpers */
  --kw-show-desktop: inline-flex;
  --kw-show-mobile: none;
}

/* ---------- ULTRA-WIDE TIERS ------------------------------ */
@media (min-width: 1900px) {
  :root {
    --kw-page-pad: 56px;
    --kw-hdr-logo-w: 220px;
    --kw-hdr-chev-size: 36px;
    --kw-hdr-nav-fs: 13px;
    --kw-hdr-ai-fs: 12px;
    --kw-hdr-cta-fs: 13px;
    --kw-ann-fs: 15px;
  }
}
@media (min-width: 2000px) {
  :root {
    --kw-page-pad: 72px;
    --kw-hdr-logo-w: 250px;
    --kw-hdr-chev-size: 40px;
    --kw-hdr-nav-fs: 14px;
    --kw-hdr-nav-pad: 13px 20px;
    --kw-hdr-cta-fs: 13px;
    --kw-hdr-cta-pad: 16px 30px;
    --kw-ann-fs: 16px;
    --kw-ft-pad-top: 64px;
    --kw-ft-logo: 56px;
  }
}
@media (min-width: 2200px) {
  :root {
    --kw-page-pad: 96px;
    --kw-hdr-logo-w: 280px;
    --kw-hdr-chev-size: 44px;
    --kw-hdr-nav-fs: 15px;
    --kw-hdr-pad-y: 14px;
    --kw-ann-pad-y: 22px;
    --kw-ann-fs: 17px;
    --kw-ft-pad-top: 72px;
    --kw-ft-logo: 60px;
    --kw-ft-row-gap: 52px;
    --kw-ft-strip-mt: 52px;
  }
}
@media (min-width: 2500px) {
  :root {
    --kw-page-pad: 120px;
    --kw-hdr-logo-w: 320px;
    --kw-hdr-chev-size: 50px;
    --kw-hdr-nav-fs: 16px;
    --kw-hdr-nav-pad: 14px 22px;
    --kw-hdr-cta-fs: 14px;
    --kw-hdr-cta-pad: 18px 34px;
    --kw-hdr-pad-y: 16px;
    --kw-ann-pad-y: 26px;
    --kw-ann-fs: 18px;
    --kw-ann-eyebrow-fs: 13px;
    --kw-ft-pad-top: 80px;
    --kw-ft-logo: 66px;
  }
}
@media (min-width: 3000px) {
  :root {
    --kw-page-pad: 160px;
    --kw-hdr-logo-w: 380px;
    --kw-hdr-chev-size: 60px;
    --kw-hdr-nav-fs: 18px;
    --kw-hdr-nav-pad: 16px 26px;
    --kw-hdr-cta-fs: 16px;
    --kw-hdr-cta-pad: 22px 40px;
    --kw-hdr-pad-y: 20px;
    --kw-hdr-ai-fs: 14px;
    --kw-hdr-ai-pad: 9px 18px 9px 16px;
    --kw-hdr-ai-dot: 9px;
    --kw-ann-pad-y: 32px;
    --kw-ann-fs: 22px;
    --kw-ann-eyebrow-fs: 15px;
    --kw-ft-pad-top: 100px;
    --kw-ft-logo: 80px;
    --kw-ft-row-gap: 64px;
    --kw-ft-strip-mt: 64px;
    --kw-ft-avatar: 36px;
  }
}

/* ---------- DESKTOP TIGHTEN ------------------------------- */
@media (max-width: 1440px) {
  :root {
    --kw-page-pad: 32px;
    --kw-hdr-logo-w: 170px;
    --kw-hdr-gap: 20px;
    --kw-hdr-nav-pad: 10px 13px;
  }
}
@media (max-width: 1280px) {
  :root {
    --kw-hdr-logo-w: 150px;
    --kw-hdr-nav-fs: 11px;
    --kw-hdr-nav-pad: 10px 11px;
  }
}

/* ---------- TABLET ---------------------------------------- */
@media (max-width: 1080px) {
  :root {
    --kw-page-pad: 24px;
    --kw-hdr-pad-y: 8px;
    --kw-hdr-logo-w: 130px;
    --kw-hdr-chev-size: 28px;
    --kw-hdr-nav-fs: 10px;
    --kw-hdr-nav-pad: 9px 10px;
    --kw-hdr-cta-pad: 12px 20px;
    --kw-hdr-cta-fs: 11px;
    --kw-ann-fs: 13px;
    --kw-ann-pad-y: 14px;
    --kw-ft-pad-top: 44px;
    --kw-ft-logo: 44px;
  }
}

/* Nav can't fit alongside badge + CTA below ~1100px — switch to the
   hamburger early so the center nav never spills into the side columns. */
@media (max-width: 1100px) {
  :root {
    --kw-show-desktop: none;
    --kw-show-mobile: inline-flex;
  }
}

@media (max-width: 880px) {
  :root {
    --kw-page-pad: 20px;
    --kw-hdr-logo-w: 120px;
    --kw-hdr-pad-y: 8px;
    --kw-ann-pad-y: 12px;
    --kw-ann-fs: 12px;
    --kw-ann-eyebrow-fs: 10px;
    --kw-ft-pad-top: 36px;
    --kw-ft-logo: 40px;
    --kw-ft-row-gap: 28px;
    --kw-ft-strip-mt: 28px;
    --kw-show-desktop: none;
    --kw-show-mobile: inline-flex;
  }
}

@media (max-width: 600px) {
  :root {
    --kw-page-pad: 16px;
    --kw-hdr-logo-w: 105px;
    --kw-hdr-chev-size: 26px;
    --kw-hdr-pad-y: 6px;
    --kw-ann-pad-y: 10px;
    --kw-ann-fs: 11px;
    --kw-ann-eyebrow-fs: 9px;
    --kw-ft-pad-top: 28px;
    --kw-ft-pad-bot: 16px;
    --kw-ft-logo: 36px;
    --kw-ft-row-gap: 20px;
    --kw-ft-strip-mt: 20px;
    --kw-ft-strip-pt: 10px;
    --kw-ft-avatar: 24px;
  }
}

@media (max-width: 420px) {
  :root {
    --kw-page-pad: 14px;
    --kw-hdr-logo-w: 90px;
    --kw-hdr-chev-size: 24px;
    --kw-hdr-ai-fs: 9px;
    --kw-hdr-ai-pad: 5px 9px 5px 8px;
    --kw-hdr-ai-dot: 6px;
    --kw-ann-fs: 11px;
    --kw-ann-eyebrow-fs: 8px;
  }
}

/* ============================================================
   THEME OVERRIDES — body[data-theme="light"]
   ============================================================ */
body[data-theme="light"] {
  --bg-canvas: var(--bg-light);
  background: var(--bg-light);
  color: var(--fg-on-light-1);
  /* Tint-aware chrome surfaces (overridden per data-tint below) */
  --kw-ft-bg: var(--bg-light-2);
  --kw-hdr-bg: rgba(255,255,255,0.84);
}
body[data-theme="light"] .kw-page-bg {
  background:
    radial-gradient(60% 40% at 80% 10%, rgba(108,200,240,0.07), transparent 70%),
    radial-gradient(50% 40% at 10% 30%, rgba(242,101,176,0.05), transparent 70%);
}
body[data-theme="light"] .kw-page-curves path { stroke: rgba(10,6,18,0.05); }
body[data-theme="light"] .kw-middle-note .chip { color: var(--fg-on-light-3); border-color: rgba(10,6,18,0.10); }
body[data-theme="light"] .kw-middle-note h2 { color: var(--fg-on-light-2); }
body[data-theme="light"] .kw-middle-note p { color: var(--fg-on-light-3); }
body[data-theme="light"] .kw-middle-divider { background: linear-gradient(180deg, rgba(10,6,18,0.10), transparent); }

/* ------------------------------------------------------------
   LIGHT-THEME TINTS — body[data-tint="..."]
   Soft color so the light surface isn't stark white. The canvas
   gets a barely-tinted base; .kw-page-bg carries larger, still-
   subtle brand-color washes. No effect in dark theme.
   ------------------------------------------------------------ */

/* Aurora — all three brand hues, whisper-soft (default) */
body[data-theme="light"][data-tint="aurora"] {
  --bg-canvas: #F8F4F5;
  background: #F8F4F5;
}
body[data-theme="light"][data-tint="aurora"] .kw-page-bg {
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(108,200,240,0.15), transparent 70%),
    radial-gradient(48% 40% at 6% 30%, rgba(242,101,176,0.10), transparent 70%),
    radial-gradient(64% 48% at 78% 96%, rgba(243,178,106,0.13), transparent 70%);
}

/* Porcelain — cool lavender-white, cyan + violet washes */
body[data-theme="light"][data-tint="porcelain"] {
  --bg-canvas: #F5F4FA;
  background: #F5F4FA;
}
body[data-theme="light"][data-tint="porcelain"] .kw-page-bg {
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(108,200,240,0.14), transparent 70%),
    radial-gradient(48% 40% at 6% 30%, rgba(118,107,165,0.12), transparent 70%),
    radial-gradient(64% 48% at 78% 96%, rgba(242,101,176,0.05), transparent 70%);
}

/* Linen — warm cream, amber + pink washes (pairs with the freebie cream) */
body[data-theme="light"][data-tint="linen"] {
  --bg-canvas: #FAF5EC;
  background: #FAF5EC;
}
body[data-theme="light"][data-tint="linen"] .kw-page-bg {
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(243,178,106,0.15), transparent 70%),
    radial-gradient(48% 40% at 6% 30%, rgba(242,101,176,0.08), transparent 70%),
    radial-gradient(64% 48% at 78% 96%, rgba(108,200,240,0.07), transparent 70%);
}

/* Slate — cool blue-grey, navy + cyan washes */
body[data-theme="light"][data-tint="slate"] {
  --bg-canvas: #F1F3F6;
  background: #F1F3F6;
}
body[data-theme="light"][data-tint="slate"] .kw-page-bg {
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(11,26,77,0.07), transparent 70%),
    radial-gradient(48% 40% at 6% 30%, rgba(108,200,240,0.11), transparent 70%),
    radial-gradient(64% 48% at 78% 96%, rgba(118,107,165,0.08), transparent 70%);
}

/* Stone — warm mineral grey, amber + violet washes, very muted */
body[data-theme="light"][data-tint="stone"] {
  --bg-canvas: #F4F2EE;
  background: #F4F2EE;
}
body[data-theme="light"][data-tint="stone"] .kw-page-bg {
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(243,178,106,0.10), transparent 70%),
    radial-gradient(48% 40% at 6% 30%, rgba(118,107,165,0.09), transparent 70%),
    radial-gradient(64% 48% at 78% 96%, rgba(11,26,77,0.05), transparent 70%);
}

/* Moss — muted olive-green, earthy and grounded */
body[data-theme="light"][data-tint="moss"] {
  --bg-canvas: #F2F4EF;
  background: #F2F4EF;
}
body[data-theme="light"][data-tint="moss"] .kw-page-bg {
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(118,134,94,0.10), transparent 70%),
    radial-gradient(48% 40% at 6% 30%, rgba(243,178,106,0.08), transparent 70%),
    radial-gradient(64% 48% at 78% 96%, rgba(11,26,77,0.05), transparent 70%);
}

/* Per-tint chrome: footer gets a slightly deeper shade of the canvas,
   the scrolled header bar blurs to the canvas color instead of pure white —
   so header, page, and footer always read as one family. */
body[data-theme="light"][data-tint="aurora"]    { --kw-ft-bg: #F1EAEC; --kw-hdr-bg: rgba(248,244,245,0.84); }
body[data-theme="light"][data-tint="porcelain"] { --kw-ft-bg: #ECEAF5; --kw-hdr-bg: rgba(245,244,250,0.84); }
body[data-theme="light"][data-tint="linen"]     { --kw-ft-bg: #F4EDE0; --kw-hdr-bg: rgba(250,245,236,0.84); }
body[data-theme="light"][data-tint="slate"]     { --kw-ft-bg: #E7EBF0; --kw-hdr-bg: rgba(241,243,246,0.84); }
body[data-theme="light"][data-tint="stone"]     { --kw-ft-bg: #EBE8E1; --kw-hdr-bg: rgba(244,242,238,0.84); }
body[data-theme="light"][data-tint="moss"]      { --kw-ft-bg: #E8ECE2; --kw-hdr-bg: rgba(242,244,239,0.84); }

/* Helpers used by Header for desktop/mobile show-hide */
.kw-only-desktop { display: var(--kw-show-desktop) !important; }
.kw-only-mobile  { display: var(--kw-show-mobile)  !important; }

/* Footer top row stacks on narrow viewports */
@media (max-width: 720px) {
  .kw-ft-top {
    grid-template-columns: 1fr !important;
    text-align: left;
    gap: 20px !important;
  }
}

/* Mobile drawer */
.kw-mobile-drawer {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(5,3,8,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  padding: 80px 32px 32px;
  gap: 8px;
  transform: translateY(-100%);
  transition: transform 360ms var(--ease-out);
}
body[data-theme="light"] .kw-mobile-drawer {
  background: rgba(255,255,255,0.96);
}
.kw-mobile-drawer.open { transform: translateY(0); }
.kw-mobile-drawer a {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  font-size: 18px;
  color: var(--fg-1);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-1);
}
body[data-theme="light"] .kw-mobile-drawer a {
  color: var(--fg-on-light-1);
  border-bottom-color: rgba(10,6,18,0.08);
}
.kw-mobile-drawer .close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: 1px solid var(--border-1);
  color: var(--fg-1); width: 40px; height: 40px;
  border-radius: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body[data-theme="light"] .kw-mobile-drawer .close {
  border-color: rgba(10,6,18,0.16);
  color: var(--fg-on-light-1);
}