/* Pocket Pro — shared tokens, theme, nav, footer, reveal. Sections style themselves in sections/*.css. */
:root {
  color-scheme: dark;
  /* tokens:start root — generated by scripts/gen_tokens.py from packages/design/tokens.json; do not edit */
  --bg: #0b0b0b;  /* screen background */
  --surface: #151515;  /* cards */
  --surface-2: #1f1f1f;  /* chips, inputs, pressed */
  --fg: #f5f1ea;  /* primary text */
  --muted: #a39e96;  /* secondary text, inactive tab */
  --line: #2a2a2a;  /* 1px hairlines and card borders */
  --accent: #ff5a1f;  /* actions and events only: CTAs, pots, live dots, one key number per section */
  --accent-ink: #ff6a33;  /* orange text on --bg (AA) */
  --on-accent: #0b0b0b;  /* text on --accent */
  --felt: #4aa3df;  /* cloth only: tables, illustration panels, data fills. Never text. */
  --on-felt: #0b0b0b;  /* text on --felt */
  --rail: #0b0b0b;  /* table rails and pockets */
  --ball: #f5f1ea;  /* ball fill on the schematic tables */
  --shadow: rgb(0 0 0 / .6);  /* drop shadows */

  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --s1: .25rem;
  --s2: .5rem;
  --s3: 1rem;
  --s4: 1.5rem;  /* screen side padding */
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 7rem;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --radius: 14px;
  --radius-lg: 28px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .7s;
  /* tokens:end root */
}

[data-theme="light"] {
  color-scheme: light;
  /* tokens:start light — generated by scripts/gen_tokens.py from packages/design/tokens.json; do not edit */
  --bg: #f6f1e7;  /* screen background */
  --surface: #ffffff;  /* cards */
  --surface-2: #ece5d8;  /* chips, inputs, pressed */
  --fg: #0b0b0b;  /* primary text */
  --muted: #5a554d;  /* secondary text, inactive tab */
  --line: #d9d1c2;  /* 1px hairlines and card borders */
  --accent: #ff5a1f;  /* actions and events only: CTAs, pots, live dots, one key number per section */
  --accent-ink: #b83a0a;  /* orange text on --bg (AA) */
  --on-accent: #0b0b0b;  /* text on --accent */
  --felt: #4aa3df;  /* cloth only: tables, illustration panels, data fills. Never text. */
  --on-felt: #0b0b0b;  /* text on --felt */
  --rail: #0b0b0b;  /* table rails and pockets */
  --ball: #f6f1e7;  /* ball fill on the schematic tables */
  --shadow: rgb(60 30 0 / .18);  /* drop shadows */
  /* tokens:end light */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .4s, color .4s;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(var(--s6), 10vw, var(--s7)); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}
/* friction-reducer line under a CTA */
.fine { margin: var(--s3) 0 0; font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.eyebrow {
  font: 600 .8rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .9em 1.5em;
  border-radius: 999px;
  border: 2px solid var(--fg);
  font: 800 .95rem/1 var(--font-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .2s, color .2s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 0 var(--accent); }
.btn-primary:hover { box-shadow: 0 10px 40px -10px var(--accent); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: var(--s4); height: 68px; }
.logo { white-space: nowrap; display: flex; align-items: center; gap: .55rem; text-decoration: none; font: 900 1.15rem/1 var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -.01em; }
.logo-ball { flex: none; width: 26px; height: 26px; transition: transform .6s var(--ease-spring); }
.logo:hover .logo-ball { transform: rotate(360deg); }
.nav-links { display: flex; gap: var(--s4); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--fg); }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav .btn { white-space: nowrap; }
.progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 12px var(--accent); }
.nav .btn { padding: .65em 1.1em; font-size: .8rem; }
.theme-toggle {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: border-color .2s, transform .4s var(--ease-spring);
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(-20deg); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 400px) {
  .nav-inner { gap: var(--s3); }
  .logo { font-size: 1rem; }
  .nav .btn { padding: .6em .9em; font-size: .72rem; }
}

/* view-transition theme swap: circle grows from the toggle */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .6s var(--ease-out); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); }
  to { clip-path: circle(150vmax at var(--vt-x, 100%) var(--vt-y, 0)); }
}

/* scroll reveal: base.js adds .in-view */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: var(--delay, 0s); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* footer */
.footer { border-top: 1px solid var(--line); padding-block: var(--s5); color: var(--muted); font-size: .9rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent-ink); }
.footer .spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}