/* kinetic-ops.app — KIP design tokens (Direction B "Magenta Line", ruled 2026-08-27)
   Source of truth: docs/design/kip-design-tokens.md · docs/design/kip-state-contract.json
   Law: no raw hex outside the :root token blocks. Semantics never colour-only. */

/* ---------- tokens: dark-first ---------- */
:root {
  /* neutrals */
  --ink-0: #0A090D;
  --ink-1: #141218;
  --ink-2: #1E1B24;
  --porcelain-0: #F3F0E9;
  --steel-3: #ABA7B3;
  --steel-5: #6E6A78;
  --steel-7: #3A3742;
  /* signature — course */
  --course-300: #FF9BD6;
  --course-400: #F566BD;
  --course-500: #E8339F;
  --course-700: #7E1355;
  --course-900: #3A1029;
  /* semantics (frozen; glyph + label always ride along) */
  --pass: #2EC27E;
  --kill: #FF4B33;
  --gate: #FFB224;
  /* surface mapping */
  --bg-canvas: var(--ink-0);
  --bg-raised: var(--ink-1);
  --bg-pressed: var(--ink-2);
  --bg-hero: #000000; /* true black hero band (logo JPG ground) */
  --text-primary: var(--porcelain-0);
  --text-secondary: var(--steel-3);
  --text-tertiary: #8A8692; /* 5.58:1 on ink.0; steel.5 stays disabled-only */
  --accent: var(--course-500);
  --accent-text: var(--course-300);
  --hairline: var(--steel-7);
  --focus-ring: var(--course-300);
  --glow-sig: 0 0 24px rgba(232, 51, 159, 0.25);
  --shadow-plate: 0 1px 4px rgba(0, 0, 0, 0.18);
  --shadow-card: none;
  /* CDC support mark (foreign mark — only inside the mark) */
  --cdc-navy: #15233F;
  --cdc-orange: #E87722;
  --cdc-plate: #FFFFFF;
  /* spacing (4pt grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* radius */
  --r-card: 20px; --r-btn: 14px; --r-chip: 10px; --r-sheet: 28px;
  /* motion */
  --t-instant: 90ms; --t-fast: 160ms; --t-state: 240ms; --t-gentle: 400ms;
  --e-standard: cubic-bezier(0.2, 0, 0, 1);
  --e-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --e-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* light pair */
@media (prefers-color-scheme: light) {
  :root {
    --bg-canvas: #F7F5F0;      /* porcelain.1 */
    --bg-raised: #FFFFFF;      /* porcelain.2 */
    --bg-pressed: #EDEAE3;
    --bg-hero: #0A090D;        /* hero band stays ink even on paper */
    --text-primary: #16141A;   /* ink.text */
    --text-secondary: #5C5864; /* steel.text */
    --text-tertiary: #6E6A78; /* 4.82:1 on porcelain.1 */
    --accent: #B81F7C;         /* course.600 */
    --accent-text: #B81F7C;
    --hairline: #DDD9D1;
    --focus-ring: #B81F7C;
    --pass: #147A50;
    --kill: #C42D18;
    --gate: #8F5E00;
    --glow-sig: none;
    --shadow-card: 0 2px 12px rgba(22, 20, 26, 0.10);
    --cdc-plate: #FFFFFF;
  }
}

/* ---------- fonts (self-hosted; @font-face injected by fetch-fonts step) ---------- */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 450;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video { max-width: 100%; display: block; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* type voices */
.glance, h1 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 680;
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.75rem); }
h2 {
  font-variation-settings: 'wdth' 125, 'wght' 620;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 var(--s4);
}
h3 { font-variation-settings: 'wdth' 100, 'wght' 600; font-size: 1.25rem; margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s4); }
.data { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88rem; }
.label {
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* skip link */
.skip { position: absolute; left: -9999px; top: 0; background: var(--bg-raised); color: var(--text-primary); padding: var(--s3) var(--s4); border-radius: var(--r-btn); z-index: 100; }
.skip:focus-visible { left: var(--s3); top: var(--s3); }

/* ---------- layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s5); }
.section { padding: var(--s8) 0; }
main { display: block; }

/* header */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg-canvas) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s3); padding-top: var(--s3); padding-bottom: var(--s3); }
.site-header img { height: 34px; width: auto; }
.site-header .wordmark { font-variation-settings: 'wdth' 125, 'wght' 680; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--text-primary); text-decoration: none; }
.site-header nav { margin-left: auto; display: flex; gap: var(--s4); }
.site-header nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; }
.site-header nav a:hover { color: var(--text-primary); }

/* hero */
.hero {
  background: linear-gradient(180deg, var(--bg-hero) 0%, var(--bg-hero) 55%, var(--ink-0, var(--bg-hero)) 100%);
  background-color: var(--bg-hero);
  color: var(--porcelain-0);
  position: relative;
  overflow: hidden;
  padding: var(--s8) 0;
}
.hero .backdrop { position: absolute; inset: 0; opacity: 0.55; object-fit: cover; height: 100%; width: 100%; }
.hero .wrap { position: relative; }
.hero .mark { height: clamp(96px, 18vw, 180px); width: auto; margin-bottom: var(--s5); }
.hero .sub { color: var(--steel-3); font-size: 1.15rem; max-width: 34em; margin-top: var(--s4); }
/* the hero band is always ink, in both schemes — its text + accents pin to the dark ramp */
.hero h1 .entity { color: var(--course-300); }
.hero .label { color: var(--steel-3); }
.hero .status-chip { background: color-mix(in srgb, var(--ink-1) 60%, transparent); border-color: var(--steel-7); }
.hero .status-chip .dot { background: var(--course-500); }
.hero .status-chip .label { color: var(--steel-3); }
.hero .store-chip { background: var(--ink-1); border-color: var(--steel-7); }
.hero .store-chip .top { color: var(--steel-3); }
.hero .store-chip .name { color: var(--porcelain-0); }

/* status chip */
.status-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  padding: var(--s2) var(--s3); margin-top: var(--s5);
  background: color-mix(in srgb, var(--bg-raised) 60%, transparent);
}
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow-sig); }

/* cards / triptych */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.card img { border-radius: calc(var(--r-card) - 8px); margin-bottom: var(--s4); aspect-ratio: 3 / 2; object-fit: cover; }

/* split layout (text + aside image) */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s5); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.rounded { border-radius: var(--r-card); }

/* course line spine — decorative, draws with scroll, behind content */
main { position: relative; }
.course-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
@media (max-width: 860px) { .course-line { display: none; } }

/* store chips */
.store-row { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.store-chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  padding: var(--s3) var(--s5);
  color: var(--text-secondary); text-decoration: none;
  background: var(--bg-raised);
}
.store-chip .top { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.store-chip .name { font-variation-settings: 'wdth' 100, 'wght' 600; color: var(--text-primary); }

/* waitlist form */
.waitlist { background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--r-sheet); padding: var(--s6); }
.field { margin-bottom: var(--s4); }
.field label { display: block; margin-bottom: var(--s1); font-size: 0.92rem; color: var(--text-secondary); }
input[type="email"], input[type="text"], textarea {
  width: 100%;
  background: var(--bg-canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  color: var(--text-primary);
  padding: var(--s3) var(--s4);
  font: inherit;
  transition: border-color var(--t-fast) var(--e-standard);
}
input:focus, textarea:focus { border-color: var(--accent); }
input:focus-visible, textarea:focus-visible, .consent input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.consent { display: flex; gap: var(--s3); align-items: flex-start; font-size: 0.9rem; color: var(--text-secondary); }
.consent input { margin-top: 4px; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--accent); color: var(--bg-canvas);
  border: 0; border-radius: var(--r-btn);
  padding: var(--s3) var(--s6);
  font: inherit; font-variation-settings: 'wdth' 100, 'wght' 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard);
}
.btn:hover { box-shadow: var(--glow-sig); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* form outcome panels — colour + glyph + label, never colour-only */
.panel { display: none; align-items: flex-start; gap: var(--s3); border-radius: var(--r-btn); padding: var(--s4); margin-top: var(--s4); border: 1px solid var(--hairline); }
.panel.show { display: flex; }
.panel .glyph { font-size: 1.1rem; line-height: 1.3; }
.panel.ok .glyph, .panel.ok .title { color: var(--pass); }
.panel.err .glyph, .panel.err .title { color: var(--kill); }
.panel .title { font-variation-settings: 'wdth' 100, 'wght' 600; display: block; }

/* footer */
.site-footer { border-top: 1px solid var(--hairline); padding: var(--s7) 0; margin-top: var(--s8); color: var(--text-secondary); font-size: 0.9rem; }
.site-footer .cols { display: flex; gap: var(--s7); flex-wrap: wrap; justify-content: space-between; }
.site-footer nav { display: flex; flex-direction: column; gap: var(--s2); }
.site-footer a { color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--text-primary); }
/* CDC support mark — foreign mark, never re-skinned (tokens §9) */
.cdc-mark { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.cdc-mark .plate {
  background: var(--cdc-plate); border-radius: 8px; padding: 6px 10px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 0.85rem;
  box-shadow: var(--shadow-plate);
}
.cdc-mark .plate .c1 { color: var(--cdc-navy); }
.cdc-mark .plate .c2 { color: var(--cdc-orange); }
.cdc-mark .suplabel { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }

/* legal pages */
.doc { max-width: 760px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--s2); }
.doc .vline { color: var(--text-tertiary); font-size: 0.9rem; margin-bottom: var(--s6); }
.doc h2 { font-variation-settings: 'wdth' 100, 'wght' 620; font-size: 1.35rem; margin-top: var(--s6); }
.doc table { border-collapse: collapse; width: 100%; margin: var(--s4) 0; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; border-bottom: 1px solid var(--hairline); padding: var(--s2) var(--s3); vertical-align: top; }
.doc th { color: var(--text-secondary); font-weight: 600; }

/* motion discipline */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 3D hero mark stage — progressive enhancement over the static mark */
.stage { position: relative; height: clamp(200px, 32vw, 320px); aspect-ratio: 1.9 / 1; max-width: 100%; margin-bottom: var(--s4); }
.stage .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 56%; width: auto; margin: 0; transition: opacity var(--t-gentle) var(--e-standard); }
.mark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--t-gentle) var(--e-standard);
  -webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 50%, #000 52%, transparent 94%);
  mask-image: radial-gradient(ellipse 72% 64% at 50% 50%, #000 52%, transparent 94%); }
.stage.live .mark { opacity: 0; }
.stage.live .mark-canvas { opacity: 1; }