/* ============================================================
   THE AGENCY — COLOR TOKENS
   The brand palette is deliberately spare: red, black, white,
   and a single warm off-white. Everything else is a restrained
   neutral scale derived to harmonize with that core.
   Source: Brand Standards Manual, p.10 ("Colors").
   ============================================================ */

:root {
  /* ---- Core brand palette (exact spec values) ---- */
  --agency-red:    #ED2127;  /* Pantone 199C · the ONLY approved red */
  --canvas:        #FFFFFF;  /* white */
  --iron:          #000000;  /* black */
  --plaster:       #F7F8F6;  /* warm off-white surface */

  /* ---- Red tints / shades (interaction states only) ---- */
  --red-press:     #C81A1F;  /* darker red for pressed/active */
  --red-hover:     #D81E23;  /* hover */
  --red-tint:      #FCE9E9;  /* faint red wash for selected rows */

  /* ---- Neutral scale (UI furniture: borders, muted text) ---- *
     Warm-leaning grays tuned to sit beside Plaster, not fight it. */
  --ink-900: #121212;
  --ink-800: #1F1F1F;
  --ink-700: #333333;
  --ink-600: #555452;
  --ink-500: #7A7977;   /* muted body text */
  --ink-400: #A3A2A0;
  --ink-300: #CFCECB;   /* strong hairline */
  --ink-200: #E6E5E2;   /* hairline / divider */
  --ink-100: #F0EFEC;   /* subtle fill */

  /* ---- Semantic aliases (use these in components) ---- */
  --color-bg:            var(--canvas);
  --color-bg-alt:        var(--plaster);
  --color-surface:       var(--canvas);
  --color-surface-inverse: var(--iron);

  --color-text:          var(--iron);
  --color-text-muted:    var(--ink-500);
  --color-text-inverse:  var(--canvas);
  --color-text-onred:    var(--canvas);

  --color-accent:        var(--agency-red);
  --color-accent-hover:  var(--red-hover);
  --color-accent-press:  var(--red-press);

  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-divider:       var(--ink-200);

  --color-focus-ring:    var(--agency-red);
}