/* ==========================================================================
   CyberBridge — editorial design system (PR 1 static preview)
   Extracted from welcome.html v0.3; extended to cover every page shell.
   Tokens and components preserve the locked visual direction: thin display
   type, wide-track labels, hairline cards, deeper-than-page card fill, and
   a single terracotta accent. No cyberpunk, no glow, no heavy shadows.
   ========================================================================== */

/* ------------------------- 01. Tokens ------------------------------------ */
:root {
  --bg-primary:      #F5F4EE;
  --bg-elevated:     #EDE9DB;
  --bg-inverse:      #1A1A1A;
  --ink-primary:     #191919;
  --ink-secondary:   #5C5C5C;
  --ink-muted:       #8F8C82;
  --hairline:        #D6D2C4;
  --hairline-strong: #B8B39E;
  --accent:          #CC785C;
  --accent-ink:      #B85C3F;
  --accent-wash:     #EFDFD1;
  --danger:          #B14A3A;
  --ok:              #4E7A52;
  --focus-ring:      rgba(204, 120, 92, 0.28);

  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-card: 6px;
  --radius-btn:  4px;
  --hairline-w:  1px;

  --max-w:     1200px;
  --max-w-sm:  720px;
  --gutter:    32px;
  --section-y: clamp(96px, 12vw, 160px);

  --track-eyebrow: 0.24em;
  --track-label:   0.16em;
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --section-y: clamp(72px, 14vw, 112px); }
}