/*
 * Houston marketing site — the ONE token layer for the landing page.
 * =====================================================================
 * PROTOTYPE SKIN — "editorial reference light" on Houston's identity (partnership review
 * build, NOT deployed). A warm IVORY ground (bone, faintly yellow), quiet
 * tinted panels that frame product shots (sage / mist / sand washes), a warm
 * near-black ink ladder, warm hairlines, and a single INK pill CTA. The
 * temperature is editorial reference's; the identity is ours — the pill stays ink, not
 * blue, so the page reads as a NEW product, never a clone.
 *
 * Ground values are sampled from editorial reference's light pages (#efeee9 / #edede7 /
 * #eae7e1 / #e7e7de) and built into a bone ladder; the tinted washes are
 * derived quiet, low-chroma versions for framing floating product imagery.
 *
 * Contrast: every text/ground pair below is recomputed for the warm grounds
 * to pass WCAG AA (≥4.5:1 body, ≥3:1 large/graphical). The ink ladder is tuned
 * against the ivory ground, the sand panel band, and the tinted washes; the
 * on-ink tones back the warm near-black footer band (ground #1a1815).
 *
 * The in-hero app mockup keeps its OWN light palette (--app-* / --agent-*,
 * lifted from packages/design-tokens) UNTOUCHED — the real product floats on
 * the warm page in a softly tinted frame, cool chrome against warm air by
 * design.
 *
 * Single self-hosted family: Hanken Grotesk (OFL, latin subset, variable
 * 100–900 axis — here declared 300–800: a LIGHT 300 display + 400 body + 600
 * UI, an airy low-contrast display voice from one humanist grotesque). No
 * serif, no Google CDN.
 */

/* ── Self-hosted font (OFL, latin subset, no runtime CDN) ─────────────────── */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;              /* variable: light 300 display + 400 body + 600 UI */
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
}

:root {
  /* ── Warm ivory ground + bone panels (sampled from editorial reference light) ────────
     A bone ladder: the page is the lightest warm ivory, cards float a half-
     step lighter, and the panel band + nested recess step warmer/deeper. */
  --ground: #ffffff;                 /* the page — pure white */
  --card: #ffffff;                   /* cards sit on white */
  --panel: #f7f7f7;                  /* the quiet neutral section panel (gray-50) */
  --panel-raised: #ececec;           /* a half-step deeper for nested recess (gray-100) */
  --ground-deep: #0a0a0a;            /* the full-bleed black band + dark cards */
  --band-black: #0a0a0a;             /* the signature full-bleed black band */

  /* ── Tinted washes — quiet, low-chroma frames for floating product shots ──
     Pale sage / mist / sand, each within a hair of the bone lightness so a
     screenshot reads as the hero and the tint only whispers underneath it. */
  --wash-sage: #f0f2f5;              /* pale sage — the app window / board frame */
  --wash-mist: #eef1f5;             /* pale mist — cool product frames */
  --wash-sand: #f3f4f6;             /* pale sand — warm product frames */

  /* ── Ink ladder (warm near-black family) ─────────────────────────────────
     Recomputed on the warm grounds: strong 15:1 / body 12.5:1 / muted 5.6–6.5:1
     / subtle ≥4.5:1 on ivory (used on ground/card, not the deepest recess). */
  --ink-strong: #0d0d0d;             /* headlines, the CTA fill — near-black */
  --ink: #1a1a1a;                    /* primary body text — 15.7:1 on white */
  --ink-muted: #5d5d5d;              /* secondary text — 6.4:1 on white (reference muted) */
  --ink-subtle: #676767;             /* quiet captions/eyebrows — 5.5:1 on white */

  /* ── Hairlines (neutral gray, no warm tint) ──────────────────────────── */
  --line: rgba(13, 13, 13, 0.09);    /* default hairline on white (~#e6e6e6) */
  --line-strong: rgba(13, 13, 13, 0.16);

  /* ── Ink pill CTA + links + focus (INK, never blue — our identity) ────── */
  --action: #0d0d0d;
  --action-hover: #2a2a2a;
  --action-text: #ffffff;            /* warm white label on the ink pill */
  --link: #1a1a17;                   /* ink text link (underlined at each use) */
  --focus: #0d0d0d;

  /* ── On-ink text (warm near-black footer band, ground #1a1815) ───────── */
  --on-ink: #faf9f5;
  --on-ink-muted: rgba(250, 249, 245, 0.74);   /* 9.4:1 on #1a1815 */
  --on-ink-faint: rgba(250, 249, 245, 0.6);    /* 7.2:1 on #1a1815 */
  --line-on-ink: rgba(250, 249, 245, 0.15);

  /* ═══ App mockup — the product's OWN palette (DESIGN.md §4). ══════════════
     Colour appears ONLY here. Each value is the app's real token. */
  --app-gutter: #eef1f7;                    /* bg-gutter / --ht-base */
  --app-screen: #fcfcfc;                    /* bg-background / neutral.50 (the floating screen) */
  --app-input: #ffffff;                     /* bg-input / base.white */
  --app-card: rgba(255, 255, 255, 0.68);    /* bg-card / glass.white-68 (cards over the screen) */
  --app-chip: rgba(13, 13, 13, 0.035);      /* bg-chip / board columns (ink-a035) */
  --app-hover: rgba(13, 13, 13, 0.05);      /* row / sidebar hover fill */
  --app-active: rgba(0, 0, 0, 0.1);         /* sidebar selected-row fill (--ht-sidebar-active) */
  --app-ink: #14161d;                       /* text-ink / cool.ink */
  --app-ink-muted: #8e8e8e;                 /* text-ink-muted / neutral.500 */
  --app-line: rgba(60, 70, 120, 0.1);       /* border-line / brand.border-wash */
  --app-line-input: #e3e3e3;                /* border-line-input */
  --app-action: #0d0d0d;                    /* bg-action / neutral.950 */
  --app-action-text: #ffffff;               /* text-action-text */
  --app-success: #00a240;                   /* status success (light) — the live dot */
  --app-danger: #e02e2a;                    /* status danger (light) */
  --app-warning: #e0ac00;                   /* status warning (light) */
  /* agent-avatar palette (DESIGN.md §4 agent.* — light base, brightened to a
     gradient top exactly as HoustonAvatar renders it in the product) */
  --agent-purple-1: #a78bfa;  --agent-purple-2: #5b21b6;
  --agent-navy-1: #60a5fa;    --agent-navy-2: #1e4d8c;
  --agent-forest-1: #4ade80;  --agent-forest-2: #1b6b3a;
  --agent-orange-1: #fb923c;  --agent-orange-2: #b45309;
  --agent-golden-1: #fbbf24;  --agent-golden-2: #a16207;
  --agent-crimson-1: #f87171; --agent-crimson-2: #a3261a;
  /* Houston helmet glyph as a mask image — tints to the agent color inside the
     avatar circle (HoustonAvatar), and to white inside the New-mission pill. */
  --helmet-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20412.248%20448.898%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M54.438%2C370.05a372.979%2C372.979%2C0%2C0%2C0%2C36.546%2C16.539c42.934%2C16.457%2C81.036%2C26.955%2C127.045%2C32.718%2C38.952%2C4.879%2C98.013%2C6.119%2C133.934-9.694l.22-28.709%2C10.9-4.2.1%2C7.633c.131%2C9.532%2C10.175%2C10.024%2C10.111%2C16.564l-.19%2C19.454a10.892%2C10.892%2C0%2C0%2C1-5.271%2C8.79A125.921%2C125.921%2C0%2C0%2C1%2C333.1%2C442.267c-27.35%2C5.945-54.827%2C7.61-83.009%2C6.115A501.786%2C501.786%2C0%2C0%2C1%2C135.308%2C429.09C98.277%2C418.317%2C63.295%2C404.2%2C30.364%2C384.378c-1.82-1.1-4.62-4.1-4.586-5.833l.486-25.225%2C11.07-8.41c1.485-34.5-.533-22.947-14.764-49.9-27.447-52-29.2-106.518-8.847-163.015%2C9.56%2C20.2%2C21.153%2C38.25%2C37.42%2C52.877C37.675%2C162.726%2C27.2%2C139.979%2C22.078%2C114.644%2C58.63%2C40.233%2C137.3-5.66%2C220.15.562c51%2C3.831%2C94.258%2C25.571%2C130.394%2C61.982-11.956-3.184-22.192-5.554-33.74-6.752C275.709%2C24.666%2C227.275%2C10.9%2C176.055%2C19.538c-20.923%2C3.528-34%2C6.957-50.682%2C16.877L139.5%2C33.929l15.86-2.793c8.528-1.5%2C24.632-1.04%2C33.836-.192%2C22.661%2C2.088%2C53.554%2C13.706%2C71.674%2C28.987-12.6%2C3.789-24.839%2C7.031-37.177%2C12.526C168.9%2C96.859%2C123.836%2C137.377%2C92.651%2C188.4c-7.872-2.92-15.5-4.417-23.465-2.461%2C29.782%2C6.032%2C38.956%2C41.129%2C31.8%2C67.976-2.394%2C8.985-7.428%2C16.16-14.663%2C22.377a346.506%2C346.506%2C0%2C0%2C0%2C147.25%2C97.184l12.006%2C21.237c1.847%2C3.267.35%2C10.053.346%2C14.518C191.213%2C405.71%2C137.381%2C395%2C88.063%2C371.576L54.751%2C355.753a55.521%2C55.521%2C0%2C0%2C0-.313%2C14.3m15.8-103.638c8.757-2.088%2C12.715-9.164%2C15.688-16.5%2C3.95-12.971%2C2.434-27.431-5.321-38.706-5.394-7.843-14.789-12.194-23.84-9.339A20.8%2C20.8%2C0%2C0%2C0%2C43.4%2C214.587c8.355-7.946%2C19.246-8.317%2C27.089-.185%2C12.642%2C13.106%2C13.272%2C37.962-.251%2C52.01M56.2%2C335.674c19.3%2C9.688%2C37.093%2C17.6%2C57.609%2C25.556l.46-40.938c.063-5.627-7.1-8.159-10.894-7.39-13.274%2C2.69-5.888%2C17.088-7.963%2C29.218L55.617%2C322.693c-1%2C4.557-1.287%2C9.423.582%2C12.981m139.579%2C48.288c1.144-4.393%2C1.22-8.69-.783-11.451a512.739%2C512.739%2C0%2C0%2C1-66.018-17.972%2C16.313%2C16.313%2C0%2C0%2C0-.129%2C12.157c8.276%2C2.7%2C16.239%2C5.339%2C24.7%2C7.329Z%22%2F%3E%3Cpath%20d%3D%22M325.964%2C373.522c-78.683%2C7.33-171.286-41.71-224.763-98.653%2C20.982-21.383%2C19.582-56.385%2C1.375-79.483%2C14.126-22.058%2C29.682-42%2C48.543-59.74C194.08%2C95.233%2C252.771%2C65.207%2C312.936%2C67.539c31.512%2C1.812%2C71.082%2C11.318%2C70.475%2C49.792a215.176%2C215.176%2C0%2C0%2C1%2C7.448%2C201.107c3.547%2C38.249-33.525%2C51.774-64.9%2C55.084m-156.623-69.56c44.588%2C29.3%2C106.347%2C54.129%2C159.883%2C46.515%2C8.458-1.2%2C16.5-3.934%2C24.588-6.324%2C5-1.476%2C7.137-5.17%2C9.631-9.01%2C48.185-74.159%2C42.9-170.662-13.764-238.39C301.111%2C78.61%2C245.166%2C94.247%2C202.936%2C121.54c-16.981%2C10.974-32.909%2C23.164-46.245%2C38.481-14.795%2C16.993-20.759%2C39.234-21.865%2C61.356-1.175%2C23.493%2C5.307%2C45.09%2C17.461%2C64.8a53.6%2C53.6%2C0%2C0%2C0%2C17.054%2C17.788%22%2F%3E%3Cpath%20d%3D%22M298.533%2C409.094c-4.467.414-7.883-1.707-9.4-5.237a12.287%2C12.287%2C0%2C0%2C1%2C1.075-10.992c1.473-2.484%2C5.351-4.9%2C8.887-5.18l31.941-2.488a8.616%2C8.616%2C0%2C0%2C1%2C9.262%2C6.052c.913%2C3.365.494%2C9.3-3.5%2C10.617-12.359%2C4.06-24.719%2C5.973-38.264%2C7.228%22%2F%3E%3Cpath%20d%3D%22M370.408%2C283.292c-6.086%2C17.577-13.539%2C33.4-26.392%2C47.208%2C26.021-57.679%2C30.288-124.219%2C4.132-182.266-6.661-14.783-15.007-27.347-24.809-41.076%2C5.144.8%2C12.975.86%2C16.972%2C4.164%2C7.836%2C6.477%2C12.518%2C15.527%2C17.384%2C24.5%2C24.5%2C45.2%2C29.763%2C98.227%2C12.713%2C147.465%22%2F%3E%3Crect%20width%3D%2215.334%22%20height%3D%2216.211%22%20transform%3D%22translate%28258.6%20409.939%29%20rotate%28-89.717%29%22%2F%3E%3C%2Fsvg%3E");

  /* ── Type ─────────────────────────────────────────────────────────────
     The "for-startups" system: the SYSTEM font stack everywhere (SF on Apple,
     Segoe on Windows) — the crispness IS the native font. The self-hosted
     Hanken family (@font-face above) is now used ONLY inside the app-window
     mock, which pins the same system stack itself, so Hanken is effectively
     unused on the landing (font files kept, not deleted). */
  --sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", monospace;

  /* ── Rhythm (editorial reference air, tuned so each headline shares its frame with a
     visual — generous between sections, never cavernous within one) ─────── */
  --section-pad: clamp(64px, 8vw, 104px);
  --gutter: clamp(20px, 5vw, 52px);
  --measure: 1120px;
  --panel-radius: clamp(24px, 3vw, 40px);

  /* ── Motion (mirrors DESIGN.md scale/motion) ─────────────────────────── */
  --dur-fast: 200ms;
  --dur-elegant: 582ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
}