/*
  WEB-only tokens. Not part of design-tokens.json.
  See docs/superpowers/specs/2026-08-30-web-ui-design.md §3.2
  and docs/superpowers/specs/2026-08-31-web-ui-polish.md §2.
*/
:root {
  /* ---- Status color (web-only; not a brand accent) ---- */
  --color-danger: #E5484D;
  --color-danger-soft: rgba(229, 72, 77, 0.14);
  --color-brand-orange-soft: rgba(242, 118, 46, 0.14);
  --color-brand-green-soft: rgba(46, 212, 122, 0.14);

  /* ---- Derived surfaces and borders ----
     White washes over the dark canvas instead of new opaque hexes, so they
     read consistently on canvas, raised and overlay alike. */
  --color-surface-hover: rgba(244, 245, 247, 0.045);
  --color-surface-sunken: rgba(0, 0, 0, 0.22);
  --color-border-strong: rgba(244, 245, 247, 0.14); /* interactive boundaries: inputs, focusable cards */
  --color-text-placeholder: #7E8496;                /* 5.21:1 on canvas — dimmer than text.secondary, still AA for small copy; text.faint is not */
  --color-topbar-bg: rgba(20, 22, 29, 0.82);        /* surface.raised at 82% for the blurred topbar */

  /* ---- Chrome sizes ---- */
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --control-height-sm: 30px;
  --control-height: 36px;
  --control-height-lg: 44px;

  /* ---- Content widths ---- */
  --content-narrow: 640px;
  --content-medium: 960px;
  --content-wide: 1180px;

  /* ---- Reading measure: caps long-form text regardless of container width ---- */
  --measure: 68ch;

  /* ---- Focus ---- */
  --focus-ring-width: 3px;

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* ---- Breakpoints (documentation only; media queries cannot read variables) ---- */
  --breakpoint-public: 640px;
  --breakpoint-portal: 900px;
}