/* ============================================================
   Hueline marketing site
   Design tokens ported verbatim from the Hueline Design System
   (tokens/colors, typography, primitives, semantic), plus the
   landing, puzzle-grid, and legal styles. Fonts (Fraunces + Inter)
   load via <link> in each page head. No JavaScript.
   ============================================================ */

:root {
  /* ---- Shell (warm cream, light) ---- */
  --shell-0:#FBF8F2; --shell-1:#F7F3EC; --shell-2:#EFE9DD; --shell-3:#E5DCCB;
  /* ---- Ink (espresso) ---- */
  --ink-0:#1F1815; --ink-1:#3B342E; --ink-2:#6B6157; --ink-3:#998E81; --ink-4:#C2B8A8;
  /* ---- Frame + sage ---- */
  --frame:#3B342E; --frame-soft:#4A4239;
  --sage:#7AA17A; --sage-soft:#9DBE9D; --sage-deep:#5C8460;
  --shadow-warm:43 30 22; --shadow-sage:122 161 122;
  /* ---- Puzzle palette of six (light) ---- */
  --puzzle-1:#D9743B; --puzzle-2:#5BA9D6; --puzzle-3:#2E8C7C;
  --puzzle-4:#E6BE45; --puzzle-5:#2E5DA8; --puzzle-6:#B0689E;
  --puzzle-1-edge:#B85D2A; --puzzle-2-edge:#3E8BBA; --puzzle-3-edge:#1F7264;
  --puzzle-4-edge:#C99F2A; --puzzle-5-edge:#1F4585; --puzzle-6-edge:#95507F;
  --cell-empty:var(--shell-2);
  --pattern-ink:rgba(31 24 21 / 1);

  /* ---- Type ---- */
  --font-display:'Fraunces','Hoefler Text',Georgia,serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --font-numeral:'Fraunces',Georgia,serif;
  --fraunces-prose:'opsz' 40,'SOFT' 30,'WONK' 0;
  --fraunces-numeral:'opsz' 72,'SOFT' 0,'WONK' 0;

  /* ---- Radius ---- */
  --radius-cell:14px; --radius-button:12px; --radius-card:20px; --radius-pill:999px; --radius-sm:8px;

  /* ---- Shadows (warm-tinted, never black) ---- */
  --shadow-xs:0 1px 2px rgb(var(--shadow-warm)/0.06);
  --shadow-sm:0 2px 6px rgb(var(--shadow-warm)/0.08);
  --shadow-md:0 6px 18px rgb(var(--shadow-warm)/0.10);
  --shadow-lg:0 16px 40px rgb(var(--shadow-warm)/0.14);
  --shadow-cell-inset:inset 0 -2px 4px rgb(var(--shadow-warm)/0.16), inset 0 2px 3px rgb(255 255 255/0.18);

  /* ---- Semantic ---- */
  --surface-app:var(--shell-1); --surface-raised:var(--shell-0); --surface-card:var(--shell-0);
  --surface-sunken:var(--shell-2); --surface-frame:var(--frame);
  --text-strong:var(--ink-0); --text-body:var(--ink-1); --text-muted:var(--ink-2);
  --text-faint:var(--ink-3); --text-on-frame:var(--shell-0);
  --line-hairline:var(--shell-3); --line-strong:var(--ink-1);
  --action-bg:var(--ink-1); --action-fg:var(--shell-0); --action-bg-hover:var(--ink-0);
}

/* ---- Dark theme via system preference (tokens from the DS dark block) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --shell-0:#2A221D; --shell-1:#1F1815; --shell-2:#2C2520; --shell-3:#3B342E;
    --ink-0:#F4EEE4; --ink-1:#E2D9CC; --ink-2:#B5A99A; --ink-3:#897E70; --ink-4:#5A5147;
    --frame:#14100D; --frame-soft:#241E19;
    --sage:#8FB78F; --sage-soft:#6E946E; --sage-deep:#A9CBA9;
    --shadow-warm:0 0 0;
    --puzzle-1:#E68A52; --puzzle-2:#74BCE4; --puzzle-3:#43A18F;
    --puzzle-4:#F0CE63; --puzzle-5:#5D86CF; --puzzle-6:#C27FAE;
    --pattern-ink:rgba(244 238 228 / 1);
  }
}

/* ============================================================ Base */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
html,body { margin:0; }
body {
  background:var(--surface-app);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body,16px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { min-height:100vh; }

/* ============================================================ Nav */
.nav { display:flex; align-items:center; justify-content:space-between; max-width:1120px; margin:0 auto; padding:22px 32px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:34px; height:34px; }
.wordmark { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:26px; font-weight:500; color:var(--text-strong); letter-spacing:-0.01em; }
.btn-dark { display:inline-block; background:var(--action-bg); color:var(--action-fg); border:none; padding:11px 20px; border-radius:var(--radius-button); font-family:var(--font-body); font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; transition:background .2s ease; }
.btn-dark:hover { background:var(--action-bg-hover); }

/* ============================================================ Hero */
.hero { background:var(--frame); color:var(--shell-0); }
.hero-inner { max-width:1120px; margin:0 auto; padding:70px 32px 84px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.overline { font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(247,243,236,0.55); }
.hero h1 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:60px; line-height:1.04; font-weight:500; margin:16px 0 18px; letter-spacing:-0.01em; color:var(--shell-0); }
.hero p { font-size:19px; line-height:1.55; color:rgba(247,243,236,0.78); max-width:34ch; margin:0 0 30px; }
.cta-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.store { display:inline-flex; align-items:center; gap:11px; background:var(--shell-0); color:var(--ink-0); padding:12px 22px; border-radius:14px; font-weight:600; text-decoration:none; font-size:15px; transition:transform .2s ease; }
.store:hover { transform:translateY(-1px); }
.store svg { width:22px; height:22px; flex-shrink:0; }
.store small { display:block; font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); }
.hero-note { font-size:13px; color:rgba(247,243,236,0.5); margin:14px 0 0; }
.hero-art { display:grid; place-items:center; }

/* ============================================================ Stat band */
.band { background:var(--shell-2); }
.band-inner { max-width:1120px; margin:0 auto; padding:30px 32px; display:flex; align-items:center; justify-content:center; gap:16px; text-align:center; flex-wrap:wrap; }
.band .num { font-family:var(--font-numeral); font-variation-settings:var(--fraunces-numeral); font-size:44px; color:var(--text-strong); line-height:1; }
.band .band-text { font-size:18px; color:var(--text-muted); max-width:30ch; text-align:left; }

/* ============================================================ Sections */
.section { max-width:1120px; margin:0 auto; padding:80px 32px; }
.section h2 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:38px; font-weight:500; color:var(--text-strong); margin:0 0 8px; text-align:center; letter-spacing:-0.01em; }
.section .lede { text-align:center; color:var(--text-faint); font-size:17px; margin:0 auto 44px; max-width:48ch; line-height:1.6; }
.samples { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sample { background:var(--surface-card); border:1px solid var(--line-hairline); border-radius:var(--radius-card); padding:26px; display:flex; flex-direction:column; align-items:center; gap:18px; box-shadow:var(--shadow-sm); }
.sample .tag { font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:0.04em; }

/* ---- "How it plays" steps ---- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1120px; margin:0 auto; }
.step { padding:4px; }
.step .step-n { font-family:var(--font-numeral); font-variation-settings:var(--fraunces-numeral); font-size:30px; color:var(--puzzle-3); line-height:1; }
.step h3 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:21px; font-weight:500; color:var(--text-strong); margin:10px 0 6px; }
.step p { font-size:15px; color:var(--text-muted); margin:0; line-height:1.6; }

/* ============================================================ Accessibility band */
.a11y { background:var(--frame); color:var(--shell-0); }
.a11y-inner { max-width:1120px; margin:0 auto; padding:72px 32px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.a11y h2 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:38px; font-weight:500; margin:0 0 16px; color:var(--shell-0); letter-spacing:-0.01em; }
.a11y p { font-size:17px; line-height:1.6; color:rgba(247,243,236,0.8); margin:0 0 14px; }
.swatch-row { display:flex; gap:14px; flex-wrap:wrap; }
.swatch { width:84px; height:84px; border-radius:var(--radius-cell); box-shadow:var(--shadow-cell-inset); }

/* ============================================================ Mosaic band */
.mosaic { background:var(--shell-2); }
.mosaic-inner { max-width:1120px; margin:0 auto; padding:72px 32px; display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center; }
.mosaic h2 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:34px; font-weight:500; color:var(--text-strong); margin:0 0 12px; letter-spacing:-0.01em; }
.mosaic p { font-size:17px; color:var(--text-muted); line-height:1.6; margin:0 0 12px; }

/* ============================================================ Footer / CTA */
.footer { max-width:1120px; margin:0 auto; padding:80px 32px; text-align:center; }
.footer h2 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:34px; font-weight:500; color:var(--text-strong); margin:0; letter-spacing:-0.01em; }
.footer .sub { color:var(--text-faint); font-size:16px; margin-top:8px; }
.footer .cta-row { justify-content:center; margin-top:26px; }
.fineprint { color:var(--text-faint); font-size:13px; margin-top:48px; }
.fineprint a { color:var(--text-muted); text-decoration:none; }
.fineprint a:hover { text-decoration:underline; }

/* ============================================================ Puzzle grid (static) */
.grid { display:grid; gap:6px; padding:14px; background:var(--shell-2); border-radius:var(--radius-card); box-shadow:var(--shadow-md); }
.grid.g6 { grid-template-columns:repeat(6,1fr); width:min(380px,82vw); }
.grid.g4 { grid-template-columns:repeat(4,1fr); width:200px; }
.grid.sm.g6 { width:264px; gap:5px; padding:12px; }
.cell { aspect-ratio:1; border-radius:var(--radius-cell); background:var(--cell-empty); }
.grid.sm .cell, .grid.g4 .cell { border-radius:11px; }
.cell.filled { box-shadow:var(--shadow-cell-inset); }
.cell.empty { box-shadow:inset 0 1px 2px rgb(var(--shadow-warm)/0.12); }

/* the six colorblind-safe colors + their redundant pattern channel */
.p1 { background-color:var(--puzzle-1); background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--pattern-ink) 15%, transparent) 0 2px, transparent 2px 9px); }
.p2 { background-color:var(--puzzle-2); background-image:radial-gradient(color-mix(in srgb, var(--pattern-ink) 15%, transparent) 1.4px, transparent 1.8px); background-size:10px 10px; }
.p3 { background-color:var(--puzzle-3); background-image:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pattern-ink) 15%, transparent) 0 2px, transparent 2px 9px); }
.p4 { background-color:var(--puzzle-4); background-image:repeating-linear-gradient(0deg, color-mix(in srgb, var(--pattern-ink) 15%, transparent) 0 2px, transparent 2px 9px); }
.p5 { background-color:var(--puzzle-5); background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--pattern-ink) 15%, transparent) 0 2px, transparent 2px 9px); }
.p6 { background-color:var(--puzzle-6); background-image:repeating-linear-gradient(0deg, color-mix(in srgb, var(--pattern-ink) 15%, transparent) 0 1.5px, transparent 1.5px 9px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--pattern-ink) 15%, transparent) 0 1.5px, transparent 1.5px 9px); }

/* ============================================================ Legal pages */
.legal { max-width:760px; margin:0 auto; padding:48px 32px 96px; }
.doc h1 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:44px; font-weight:500; color:var(--text-strong); margin:0 0 6px; letter-spacing:-0.01em; }
.doc .updated { color:var(--text-faint); font-size:14px; margin:0 0 32px; }
.doc h2 { font-family:var(--font-display); font-variation-settings:var(--fraunces-prose); font-size:24px; font-weight:500; color:var(--text-strong); margin:36px 0 10px; }
.doc p, .doc li { font-size:16px; line-height:1.65; color:var(--text-body); }
.doc ul { padding-left:22px; }
.doc li { margin-bottom:8px; }
.doc a { color:var(--puzzle-3); text-decoration:none; }
.doc a:hover { text-decoration:underline; }
.doc strong { color:var(--text-strong); }

/* ============================================================ Responsive */
@media (max-width:880px) {
  .hero-inner, .a11y-inner, .mosaic-inner { grid-template-columns:1fr; }
  .mosaic-inner { gap:32px; }
  .samples, .steps { grid-template-columns:1fr; }
  .hero h1 { font-size:44px; }
  .hero-art { order:-1; }
  .mosaic .grid { justify-self:center; }
}
@media (max-width:560px) {
  .nav { padding:18px 22px; }
  .hero-inner { padding:48px 22px 60px; }
  .section { padding:60px 22px; }
  .hero h1 { font-size:38px; }
  .section h2, .a11y h2 { font-size:30px; }
  .swatch { width:64px; height:64px; }
  .legal { padding:32px 22px 72px; }
  .doc h1 { font-size:34px; }
}