/* hk-tokens.css: the ONE design-token sheet for every public Hunter Killer surface
   (design pass 2026-10-19, owner: "it still looks vibe-coded"). site_chrome.head_assets()
   loads it right after hk-theme.css, so every stamped, generated and server-rendered page
   gets the same scale. hk-theme.css keeps the palette hexes (pinned by tests); this sheet
   names them for components and holds the type, spacing, radius, shadow and width scales,
   plus the three shared components: .hk-card, .hk-btn (primary / secondary / quiet) and
   .hk-input. Dark only, on purpose: no public page has a light variant.
   Faces: no webfonts. The display face and the text face are the one system sans every
   page already used, told apart by weight and tracking; numbers sit in the mono stack and
   every number is tabular. The text stack carries CJK fallbacks for the zh, ja and ko sites.
   Scoped page sheets (sales-design.css, home-cinematic.css, the agents and signup pages)
   read these names and declare no hex, radius or px type of their own. */
:root{
  /* type: one text face, one display face (same family, heavier and tighter), one mono */
  --hk-font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Microsoft YaHei","Yu Gothic UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK SC","Noto Sans",sans-serif;
  --hk-font-display:var(--hk-font-text);
  --hk-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --hk-font:var(--hk-font-text);
  --hk-mono:var(--hk-font-mono);
  --hk-w-display:650;
  --hk-track-display:-.035em;
  --hk-track-caps:.12em;
  --hk-fs-xs:12px;                           /* captions, kickers, table labels */
  --hk-fs-sm:13px;                           /* notes, terms, footer */
  --hk-fs-md:15px;                           /* card copy, list items, links */
  --hk-fs-base:16px;                         /* body */
  --hk-fs-lg:18px;                           /* ledes */
  --hk-fs-h3:clamp(19px,1.6vw,22px);         /* card titles */
  --hk-fs-xl:clamp(24px,2.6vw,30px);         /* plan names, panel headings */
  --hk-fs-2xl:clamp(28px,3vw,40px);          /* section H2 */
  --hk-fs-hero:clamp(38px,4.6vw,64px);       /* hero H1 */
  --hk-fs-price:clamp(36px,3vw,44px);        /* the price */
  --hk-lh-tight:1.1;
  --hk-lh-snug:1.3;
  --hk-lh-body:1.55;
  /* spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 */
  --hk-sp-1:4px; --hk-sp-2:8px; --hk-sp-3:12px; --hk-sp-4:16px;
  --hk-sp-6:24px; --hk-sp-8:32px; --hk-sp-12:48px; --hk-sp-16:64px;
  --hk-section:var(--hk-sp-16);              /* space between sections */
  /* radius: one for cards, one for buttons and inputs, one small for chips */
  --hk-r-card:14px;
  --hk-r-btn:8px;
  --hk-r-sm:6px;
  --hk-r-pill:999px;
  --hk-r-md:var(--hk-r-btn);
  --hk-r-lg:var(--hk-r-card);
  /* colour: the hexes live in hk-theme.css; these are the names components use */
  --hk-fg:var(--hk-ink);
  --hk-fg-muted:var(--hk-muted);
  --hk-bg-elevated:var(--hk-surface);
  --hk-bg-deep:#0b0f14;                      /* chart stages only */
  --hk-line-strong:color-mix(in srgb,var(--hk-accent) 22%,var(--hk-line));
  --hk-accent-soft:color-mix(in srgb,var(--hk-accent) 9%,transparent);
  --hk-gold:#e3b84f;                         /* Founding 50 only */
  --hk-ongold:#231a05;
  --hk-gold-soft:color-mix(in srgb,var(--hk-gold) 10%,transparent);
  /* the one shadow, the one glow, the content width, the motion */
  --hk-shadow:0 24px 56px -32px rgba(0,0,0,.85);
  --hk-glow:radial-gradient(ellipse 70% 420px at 82% 0,color-mix(in srgb,var(--hk-accent) 7%,transparent),transparent 68%);
  --hk-wrap:1160px;
  --hk-gutter:40px;
  --hk-motion:160ms ease;
}
@media(max-width:900px){:root{--hk-gutter:24px;--hk-section:var(--hk-sp-12)}}
@media(max-width:640px){:root{--hk-gutter:20px;--hk-section:var(--hk-sp-12)}}
@media(prefers-reduced-motion:reduce){:root{--hk-motion:0ms linear}}

body{font-variant-numeric:tabular-nums}
.hk-num{font-variant-numeric:tabular-nums}

/* eyebrow: the small caps line above every hero and section heading */
.hk-eyebrow{margin:0 0 var(--hk-sp-4);color:var(--hk-accent);font:600 var(--hk-fs-xs)/1.4 var(--hk-font-text);letter-spacing:var(--hk-track-caps);text-transform:uppercase}

/* card */
.hk-card{background:var(--hk-bg-elevated);border:1px solid var(--hk-line);border-radius:var(--hk-r-card);padding:var(--hk-sp-6);color:var(--hk-fg)}
.hk-card-raised{box-shadow:var(--hk-shadow)}
@media(max-width:640px){.hk-card{padding:var(--hk-sp-4)}}

/* button: primary (accent), secondary (outline), quiet (underlined text) */
.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hk-sp-2);min-height:48px;padding:0 var(--hk-sp-6);border:1px solid var(--hk-line-strong);border-radius:var(--hk-r-btn);background:var(--hk-bg-elevated);color:var(--hk-fg);font:600 var(--hk-fs-md)/1.2 var(--hk-font-text);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--hk-motion),border-color var(--hk-motion),color var(--hk-motion)}
.hk-btn:hover{border-color:var(--hk-accent);color:var(--hk-fg);text-decoration:none}
.hk-btn:focus-visible{outline:3px solid var(--hk-accent);outline-offset:3px}
.hk-btn:disabled,.hk-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.hk-btn-primary,.hk-btn--primary,.hk-btn.primary{background:var(--hk-accent);border-color:var(--hk-accent);color:var(--hk-onaccent)}
.hk-btn-primary:hover,.hk-btn--primary:hover,.hk-btn.primary:hover{background:color-mix(in srgb,var(--hk-accent) 88%,white);border-color:color-mix(in srgb,var(--hk-accent) 88%,white);color:var(--hk-onaccent)}
.hk-btn-secondary{background:transparent;border-color:var(--hk-line-strong);color:var(--hk-fg)}
.hk-btn-secondary:hover{border-color:var(--hk-accent);color:var(--hk-accent)}
.hk-btn-quiet{min-height:44px;padding:var(--hk-sp-2) 0;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;color:var(--hk-fg);font-weight:500}
.hk-btn-quiet:hover{color:var(--hk-accent)}
.hk-btn-block{display:flex;width:100%}

/* input: 16px on purpose, so iOS Safari never zooms the form on focus */
.hk-input{display:block;width:100%;min-height:46px;padding:0 var(--hk-sp-3);border:1px solid var(--hk-line);border-radius:var(--hk-r-btn);background:var(--hk-bg);color:var(--hk-fg);font:400 16px/1.3 var(--hk-font-text);appearance:none;outline:none;transition:border-color var(--hk-motion),box-shadow var(--hk-motion)}
.hk-input::placeholder{color:var(--hk-dim)}
.hk-input:focus,.hk-input:focus-visible{border-color:var(--hk-accent);box-shadow:0 0 0 3px var(--hk-accent-soft)}
.hk-input.bad,.hk-input[aria-invalid=true]{border-color:var(--hk-bad)}
select.hk-input{padding-right:var(--hk-sp-8);background-image:linear-gradient(45deg,transparent 50%,var(--hk-fg-muted) 50%),linear-gradient(135deg,var(--hk-fg-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}