/* ============================================================
   Traffic-Ticket.ai — Color tokens
   Palette logic: traffic-signal red as the single authoritative
   accent, warm paper-white canvas (legal document feel), deep
   charcoal ink (never pure black), amber as a secondary signal
   for warnings/urgency, and a quiet go-green for success states.
   ============================================================ */

:root {
  /* ---- Brand / accent (Signal Red) ---- */
  --color-primary: #C41E3A;          /* Signal Red — CTAs, links, active states */
  --color-primary-hover: #A8172F;    /* hover: darker */
  --color-primary-active: #8C1327;   /* pressed: darkest */
  --color-primary-soft: #FBE7EA;     /* tint background for banners, selected rows */
  --color-primary-soft-border: #F0BCC4;

  /* ---- Secondary accent (Amber — caution / urgency / deadlines) ---- */
  --color-amber: #C8790A;
  --color-amber-hover: #A9660A;
  --color-amber-soft: #FBEDD9;
  --color-amber-soft-border: #EAD2A3;

  /* ---- Authority navy (dark sections, footer, sidebar) ---- */
  --color-navy: #171A21;
  --color-navy-elevated: #21252F;
  --color-navy-hairline: #323744;

  /* ---- Ink / text (warm charcoal, never pure black) ---- */
  --color-ink: #1C1B1F;
  --color-ink-secondary: #47454E;
  --color-ink-muted: #7A7883;
  --color-ink-disabled: #ACAAB3;
  --color-on-primary: #FFFFFF;
  --color-on-navy: #F4F3F0;
  --color-on-navy-muted: #9A9DA8;

  /* ---- Surface / canvas (warm paper, not clinical white) ---- */
  --color-canvas: #FAF8F4;
  --color-canvas-alt: #F2EFE8;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F5F3EE;

  /* ---- Hairlines / borders ---- */
  --color-hairline: #E4E0D5;
  --color-hairline-strong: #D2CDBD;
  --color-hairline-on-navy: #323744;

  /* ---- Semantic ---- */
  --color-success: #1E7A4C;
  --color-success-soft: #E1F1E7;
  --color-danger: #C41E3A;
  --color-danger-soft: #FBE7EA;
  --color-warning: #C8790A;
  --color-warning-soft: #FBEDD9;
  --color-info: #2A5C8A;
  --color-info-soft: #E4EDF4;

  /* ---- Shadows (subtle — authority via hairlines, not heavy elevation) ---- */
  --shadow-sm: 0 1px 2px rgba(28, 27, 31, 0.06);
  --shadow-md: 0 2px 8px rgba(28, 27, 31, 0.08), 0 1px 2px rgba(28, 27, 31, 0.05);
  --shadow-lg: 0 12px 32px rgba(28, 27, 31, 0.12), 0 2px 6px rgba(28, 27, 31, 0.06);
  --shadow-focus: 0 0 0 3px rgba(196, 30, 58, 0.28);
}