/* Product-only tokens. NOT shared with landing, NOT drift-checked.
   1) Status dots — low-saturation, re-tuned to the paper/ink/blue palette.
      Never render as filled chips or bands.
   2) --overlay / --active — product-only semantics.
   3) Alias bridge (TRANSITIONAL): legacy token names mapped onto brand tokens
      so existing app.css renders unchanged. Remove each alias as the screens
      that use it migrate to canonical names; delete this block when none remain. */

:root {
  --dot-open: #878c87;
  --dot-planned: #5f9b96;
  --dot-building: #966137;
  --dot-shipped: #5f7444;
  --dot-someday: #8a7f97;

  /* Stage-pipeline dots — the Board groups by derived stage, not stored status.
     Aliased onto the status-dot palette so they track light/dark automatically
     (custom properties resolve at use time); give them their own values here if
     the two axes should ever diverge. shipped reuses --dot-shipped. */
  --stage-design: var(--dot-building);
  --stage-plan:   var(--dot-someday);
  --stage-exec:   var(--dot-planned);
  --stage-ship:   var(--dot-shipped);
  --overlay: rgba(35, 40, 42, 0.38);

  /* Boundary of an INTERACTIVE control (input, select, textarea, checkbox).
     Distinct from --line, which is a decorative hairline between surfaces:
     WCAG 1.4.11 requires 3:1 for the former and exempts the latter. --line is
     1.30:1 on paper, so a control drawn with it has no perceivable edge. */
  --line-control: #858480;

  /* One monospace stack for the whole product (self-hosted IBM Plex Mono,
     system fallbacks). Use var(--mono) everywhere — never inline the stack. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* alias bridge */
  --bg: var(--paper);
  --surface: var(--paper-raised);
  --sidebar: var(--paper-deep);
  --text: var(--ink);
  --muted: var(--ink-faint);
  --border: var(--line);
  --accent: var(--blue);
  --active: var(--paper-deep);

  /* Auth split brand panel — a fixed deep-teal that reads on either shell. */
  --auth-panel-a: #1f625e;
  --auth-panel-b: #123f3d;
  --auth-panel-ink: #e9f3f0;
  --auth-panel-em: #ffffff;
}

/* --- Density tokens (product-only; high-density baseline) ---
   Single-source knobs for spacing + type. Retune density here, not in app.css.
   Brand rhythm (landing) is unaffected — these live in the product layer. */
:root {
  /* spacing scale (4px grid). Value-based naming: the token name IS the
     pixel value, so adding a size never renumbers an existing one. --space-14,
     --space-18, and --space-24 fill the gaps between 12/16/20 and are in
     active use throughout app.css as the gap values for that grid. */
  --space-2: 2px;   --space-4: 4px;   --space-6: 6px;   --space-8: 8px;
  --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px;
  --space-18: 18px; --space-20: 20px; --space-24: 24px;
  /* semantic shell / rhythm */
  --main-pad-y: 18px;
  --main-pad-x: clamp(16px, 2vw, 28px);
  --main-pad-b: 32px;
  --section-gap: 10px;
  /* type scale */
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px;
  --text-lg: 16px; --text-title: 18px; --text-stat: 20px;
  --text-h2: 22px; --text-hero: 24px; --text-h1: 28px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dot-open: #8e918e;
    --dot-planned: #78bdb4;
    --dot-building: #d39a68;
    --dot-shipped: #9fb37a;
    --dot-someday: #a596b0;
    --overlay: rgba(0, 0, 0, 0.55);
    --line-control: #6d7576;
  }
}

:root[data-theme="dark"] {
  --dot-open: #8e918e;
  --dot-planned: #78bdb4;
  --dot-building: #d39a68;
  --dot-shipped: #9fb37a;
  --dot-someday: #a596b0;
  --overlay: rgba(0, 0, 0, 0.55);
  --line-control: #6d7576;
}