/* causa/ui/static/tokens.css — single source of truth for all UI styling values.
   Whitelabel skin = replace this file, nothing else. */
:root {
  /* Brand */
  --brand-primary: #2b3a67;
  --brand-bg: #f7f7f5;
  --brand-text: #1c1c1c;

  /* Support state (redundant encoding lives in app.js style rules, not here) */
  --color-supported: #2e7d32;
  --color-hypothesized: #757575; /* was #9e9e9e = 2.50:1 on --brand-bg, below the 3:1 UI floor; now 4.30:1 */
  --color-contested: #c62828;

  /* Node kind base fills */
  --color-node-field: #2b3a67;
  --color-node-claim: #ffffff;

  /* Fixability badge colors */
  --color-fixable: #2e7d32;
  --color-unfixable: #c62828;
  --color-unknown: #9e9e9e;

  /* Edges */
  --color-edge-causal: #b8860b;
  --color-edge-tree: #bdbdbd;

  /* Typography */
  --font-display: "Georgia", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-label-min: 10px;

  /* Spacing / shape */
  --spacing-unit: 8px;
  --radius-panel: 6px;

  /* UI chrome */
  --color-border: #ddd;
  --color-muted: #888;
  --color-on-dark: #ffffff;

  /* Legend / filters / tooltip (Spec 1d) */
  --opacity-dimmed: 0.25;
  --color-unknown-state: #9e9e9e;
  --color-chip-active: #2b3a67;
  --color-tooltip-bg: #1c1c1c;
  --color-tooltip-text: #ffffff;

  /* Type scale (VISUAL-01) — UI type only; canvas labels use --font-size-label-min */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --line-height-body: 1.5;
  --line-height-display: 1.2;
  --letter-spacing-label: 0.04em;

  /* Spacing scale (VISUAL-01) — 8px base, half steps; --spacing-unit above is the --space-2 alias */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  /* Detail panel: a share of the viewport between a readable floor and a ceiling that keeps
     the canvas primary (operator 2026-10-16, replaces the fixed 360px). 1280px wide → 358px. */
  --panel-width: clamp(320px, 28vw, 520px);

  /* Surfaces / selection (VISUAL-01) */
  --color-surface: #ffffff;
  --color-surface-hover: #ebebe7;
  --color-selection-outline: #2b3a67;
  --selection-outline-width: 3px;
  --selection-outline-offset: 2px;

  /* Support-state band along the bottom of each claim card (operator feedback 2026-10-14):
     colour as an area, the border style keeps the non-colour cue. Must stay below the
     card's 8px bottom padding so it never runs under the label. */
  --support-band-height: 6px;

  /* Fixability badge (hammer) on the claim card's top-right corner */
  --badge-size: 16px;

  /* Ring layout (RING-01, spec 2026-10-15-causa-ring-design.md). The only numbers the layout
     carries: field ring radius, radial step per claim depth or overflow row, arc pitch per
     claim card (claim card = 160px text + 2 × 8px padding + border, so 200 leaves a gap). */
  --ring-radius: 320px;
  --ring-depth-step: 200px;
  --ring-card-pitch: 200px;

  /* Field accent band along the field card's bottom edge (same device as --support-band-height) */
  --field-band-height: 6px;

  /* Aggregated cross-field chord when the source field carries no accent */
  --color-chord: #b8860b;

  /* Keyboard help / focus (KEYNAV-01) */
  --color-overlay-bg: rgba(28, 28, 28, 0.55);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.25);
  --color-kbd-bg: #f0f0ee;
  --color-kbd-border: #bdbdbd;
  --color-focus-ring: #2b3a67;

  /* Site shell — mozilla-protocol card (DECISIONS Q16; spec 2026-10-15-causa-site-design.md).
     The canvas tokens above are untouched. Neutrals, link colours, spacing/layout scales, radii and
     shadows are the card's cited values. The type scale is an assumption (Q17): the card ships fluid
     Sass mixins, not pixels. Layout widths marked (craft) are craft-core choices, not card values. */
  --site-black: #161616;
  --site-black-strong: #000000;
  --site-white: #fafafa;
  --site-white-strong: #ffffff;
  --site-gray: #b3b3b3;
  --site-gray-light: #e8e8e8;
  --site-gray-mid: #6d6d6d;
  --site-gray-dark: #414141;
  --site-link: #0060df;
  --site-link-hover: #0250bb;
  --site-link-visited: #b833e1;

  --site-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-title-2xl: 48px;
  --site-title-xl: 40px;
  --site-title-lg: 32px;
  --site-title-md: 24px;
  --site-title-sm: 20px;
  --site-body-lg: 18px;
  --site-body-md: 16px;
  --site-body-sm: 14px;
  --site-body-xs: 12px;
  --site-lh-display: 1.1;
  --site-lh-body: 1.5;

  --site-spacing-xs: 4px;
  --site-spacing-sm: 8px;
  --site-spacing-md: 16px;
  --site-spacing-lg: 24px;
  --site-spacing-xl: 32px;
  --site-spacing-2xl: 48px;
  --site-layout-2xs: 16px;
  --site-layout-xs: 24px;
  --site-layout-sm: 32px;
  --site-layout-md: 48px;
  --site-layout-lg: 64px;
  --site-layout-xl: 96px;
  --site-layout-2xl: 192px;

  --site-radius-xs: 2px;
  --site-radius-sm: 4px;
  --site-radius-md: 8px;
  --site-radius-lg: 16px;
  --site-shadow-sm: 0 8px 12px 1px rgba(29, 17, 51, 0.04), 0 3px 16px 2px rgba(9, 32, 77, 0.12), 0 5px 10px -3px rgba(29, 17, 51, 0.12);
  --site-shadow-md: 0 16px 24px 2px rgba(29, 17, 51, 0.04), 0 6px 32px 4px rgba(9, 32, 77, 0.12), 0 8px 12px -5px rgba(29, 17, 51, 0.12);

  --site-content-max: 1440px;
  --site-measure: 68ch;            /* (craft) reading width for prose */
  --site-card-min: 280px;          /* (craft) min column of the field grid */
  --site-touch-target: 44px;       /* (craft) WCAG 2.2 target size */
  --site-header-height: 64px;      /* (craft) document pages */
  --site-header-height-app: 48px;  /* (craft) graph page, compact */
  --site-swatch-border: 4px;       /* 4px so `double` draws two lines, same as the canvas legend */
}