/*
 * Design tokens — colours, spacing, type scale, elevation.
 *
 * ── Load order contract ──────────────────────────────────────────────────────
 * The layout calls `stylesheet_link_tag :app`, which Propshaft expands to every
 * *.css file under app/assets sorted by logical path (Propshaft::Helper
 * #app_stylesheets_paths). The numeric prefixes ARE the cascade order — renaming
 * a file renames its position. Order runs:
 *
 *   01_tokens      custom properties only, no selectors that paint
 *   02_base        reset, typography, links, focus
 *   03_layout      header, nav, container, page furniture
 *   04_components  cards, buttons, forms, tables, badges, flash
 *   05_pipeline    progress stepper, file-note review, reports
 *   06_responsive  every breakpoint, last so it always wins
 *
 * Brand navy follows the KLO document branding (archive/scripts/branding.py
 * BRAND_NAVY 34,49,96).
 *
 * Colour carries meaning consistently everywhere: navy = brand/in flight,
 * amber = needs a person, green = done, red = failed, grey = inactive/not
 * captured. Nothing below is decorative — if a colour appears in a component it
 * is because it means one of those five things.
 */

:root {
  /* Brand + ink */
  --navy: #223160;
  --navy-dark: #1b1559;
  --navy-soft: #e8ecf7;
  --ink: #1f2430;
  --ink-soft: #3d4658;
  --muted: #667085;

  /* Surfaces + rules */
  --line: #dde2ea;
  --line-strong: #c9d0dc;
  --paper: #f4f5f8;
  --white: #ffffff;
  --wash: #f8f9fc;

  /* Status */
  --green: #1d7a46;
  --green-soft: #e6f4ea;
  --green-line: #b7e0c4;
  --amber: #a05e03;
  --amber-soft: #fff4e0;
  --amber-line: #ecd39d;
  --red: #b42318;
  --red-soft: #fdecea;
  --red-line: #f6c6c1;
  --blue: #1f5fbf;
  --blue-soft: #e8f0fd;
  --blue-line: #c3d0ef;

  /* Shape */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 1px 8px rgba(20, 30, 60, 0.04);
  --shadow-lift: 0 4px 12px rgba(20, 30, 60, 0.1);
  --focus: 0 0 0 3px rgba(34, 49, 96, 0.25);

  /* Spacing scale — used wherever a value is a deliberate rhythm step rather
     than an optical nudge. Optical nudges stay as literals. */
  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 0.75rem;
  --gap-4: 1rem;
  --gap-5: 1.5rem;
  --gap-6: 2rem;

  /* Layout */
  --header-height: 3.25rem;
  --container-max: 68rem;
  --container-pad: 1.5rem;

  /* Minimum comfortable hit area. Applied to controls on coarse pointers
     (06_responsive) rather than everywhere — a 44px button on a mouse-driven
     admin table is just bulk. */
  --touch-target: 44px;
}