/* ==========================================================================
   BuildWise — Color tokens
   Studio Gray palette. Locked 09 Jul 2026 — four colors, four roles.
   No fifth color, no gradients, no tints beyond color-mix() states below.
   ========================================================================== */

:root {
  /* ---- Base palette ---- */
  --frame:    #222223;  /* ink · text · CTAs · borders — PMS Neutral Black C */
  --concrete: #888B8D;  /* supporting text — 18px+ / 14px bold+ only — PMS Cool Gray 8 C */
  --form:     #FFFFFF;  /* canvas */
  --land:     #F2F0E4;  /* warm accent · bands · quiet fills */

  /* ---- Interaction states (derived, not new colors) ---- */
  --frame-hover: color-mix(in srgb, var(--frame) 82%, var(--form));   /* primary button hover */
  --frame-active: var(--frame);

  /* ---- Semantic aliases ---- */
  --surface-canvas: var(--form);
  --surface-band: var(--land);
  --text-primary: var(--frame);
  --text-supporting: var(--concrete); /* 18px+ / 14px bold+ only, see typography.css rules */
  --text-on-frame: var(--form);
  --border-default: var(--frame);
  --border-quiet: var(--land);
  --border-rule: var(--concrete);

  /* ---- Status semantics — pattern-based, palette-internal only ---- */
  --status-ontrack-bg: var(--frame);
  --status-ontrack-fg: var(--form);
  --status-pending-border: var(--frame);
  --status-pending-fg: var(--frame);
  --status-delayed-fg: var(--frame);
  --status-delayed-border: var(--concrete);
  --status-critical-bg: var(--frame);
  --status-critical-fg: var(--form);

  /* Hatch fills used by the "delayed" status pattern (45deg, 38% Concrete, 4px stripe / 5px gap) */
  --hatch-delayed: repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--concrete) 38%, var(--form)) 0,
      color-mix(in srgb, var(--concrete) 38%, var(--form)) 4px,
      var(--form) 4px, var(--form) 9px);
  /* Thin hatch rule used decoratively (section dividers) */
  --hatch-rule: repeating-linear-gradient(45deg,
      var(--concrete) 0, var(--concrete) 3px,
      transparent 3px, transparent 8px);
}