/* FMU color tokens — red-led on white.
   Brand Red = structural chrome (~25-30%). Flame = the spark/CTA (~10%).
   White dominates as background. Warm grays support text + surfaces. */
:root {
  /* ---- Brand red (structural chrome) ---- */
  --red-900: #5A0F15; /* deepest oxblood — text on red tints, darkest bands */
  --red-800: #7E141C; /* footers, deep feature bands */
  --red-700: #9A1B22; /* pressed/active on red */
  --red-600: #B0202A; /* PRIMARY brand red — headers, nav, key chrome */
  --red-500: #C82F33; /* hover lift on red surfaces */
  --red-100: #F7DDDE; /* tint fills, nav-link text on red, soft backgrounds */
  --red-50:  #FCEFEF; /* lightest wash behind callouts */

  /* ---- Flame accent (the spark, from the logo) ---- */
  --flame-600: #D63A1E; /* solid CTA buttons + white text (AA-safe) */
  --flame-500: #F8502E; /* signature accent — flame mark, key stats, links */
  --flame-400: #FB6A3C; /* hover, bright gradient stop, flame on dark/red */
  --flame-300: #FF8A5B; /* light tints, badges */
  --flame-gradient: linear-gradient(135deg, #FB6A3C 0%, #F8502E 55%, #D63A1E 100%); /* @kind color */

  /* ---- Neutrals (warm support) ---- */
  --ink:      #15100F; /* primary body text, wordmark on light */
  --gray-700: #46403F; /* headings on white, strong UI text */
  --gray-500: #736B6A; /* muted/secondary text, captions */
  --gray-300: #BDB6B5; /* disabled text */
  --gray-200: #DCD7D6; /* borders, input outlines */
  --gray-100: #ECE8E7; /* card borders, subtle fills */
  --gray-50:  #F7F4F3; /* warm off-white — alternating sections */
  --white:    #FFFFFF; /* dominant page background */

  /* ---- Semantic (use sparingly — always pair danger w/ an icon) ---- */
  --success: #1E8E5A; /* pass / in-spec / certified */
  --warning: #E0A400; /* caution, pending */
  --info:    #2C6E8F; /* technical/neutral note (steel-blue) */
  --danger:  #8E1B1B; /* fail / destructive — deep maroon, distinct from chrome */

  /* ---- Semantic role aliases ---- */
  --surface-page:    var(--white);
  --surface-alt:     var(--gray-50);
  --surface-card:    var(--white);
  --chrome-header:   var(--red-600);
  --chrome-footer:   var(--red-800);
  --chrome-band:     var(--red-800);
  --text-body:       var(--ink);
  --text-heading:    var(--gray-700);
  --text-muted:      var(--gray-500);
  --text-on-red:     var(--red-100);
  --accent:          var(--flame-500);
  --cta-bg:          var(--flame-600);
  --cta-bg-hover:    var(--flame-500);
  --border-subtle:   var(--gray-100);
  --border-default:  var(--gray-200);
  --border-strong:   var(--ink);
}