/* byKe — common presentation tokens. No data or application state lives here. */
:root {
  color-scheme: dark;
  --bg-primary: #090909;
  --bg-secondary: #101010;
  --surface-1: #161616;
  --surface-2: #202020;
  --surface-3: #2b2b2a;
  --text-primary: #ecebe6;
  --text-secondary: #a8a8a3;
  --text-muted: #8c8c87;
  --text-on-signal: #090909;
  --signal-red: #ff2345;
  --border-subtle: #282828;
  --border-control: #62625f;
  --focus-ring: #ecebe6;
  --image-scrim: rgb(9 9 9 / 62%);

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-technical: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --type-micro: .6875rem;
  --type-caption: .8125rem;
  --type-body: .9375rem;
  --type-label: 1rem;
  --type-section: 1.25rem;
  --type-page: clamp(1.75rem, 7.7vw, 2rem);
  --type-hero: clamp(1.75rem, 8.2vw, 2.25rem);
  --type-metric: clamp(2.25rem, 10.5vw, 2.75rem);
  --type-instrument: clamp(3rem, 14vw, 4rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --page-gutter: 20px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-control: 10px;
  --radius-round: 999px;
  --touch-target: 44px;
  --control-height: 48px;
  --nav-height: 66px;
  --content-max: 1120px;

  /* Preserve the V4 motion contract and its reduced-motion behavior. */
  --motion-micro: 120ms;
  --motion-nav: 210ms;
  --motion-data: 560ms;
  --motion-event: 1100ms;
  --ease-byke: cubic-bezier(.16, .75, .2, 1);

  /* Compatibility aliases for the existing views and SVG renderers. */
  --bg: var(--bg-primary);
  --bg-2: var(--bg-secondary);
  --panel: var(--surface-1);
  --txt: var(--text-primary);
  --muted: var(--text-secondary);
  --muted-2: var(--text-muted);
  --accent: var(--signal-red);
  --accent-ink: var(--text-on-signal);
  --line: var(--border-subtle);
  --line-2: var(--border-control);
  --ok: var(--text-primary);
  --sans: var(--font-body);
  --mono: var(--font-technical);
  --r: var(--radius-sm);
}

@media (max-width: 379px) { :root { --page-gutter: 18px; } }
@media (min-width: 420px) { :root { --page-gutter: 22px; } }
@media (min-width: 768px) { :root { --page-gutter: 28px; } }
@media (min-width: 1024px) { :root { --page-gutter: 40px; } }

/* Keep the requested app framing while retaining native scrolling in both axes.
   App-controlled photo zoom uses its own range input and image transform. */
@media (any-pointer: coarse) {
  html, body.byke-shell { touch-action: pan-x pan-y; }
}