/* ============================================================
   US DEMOLITION — COLOR TOKENS
   Industrial premium: deep blacks, charcoal steel, metallic gold.
   ============================================================ */
:root {
  /* --- Base neutrals: asphalt → steel --- */
  --black-950: #060606;   /* true backdrop, logo field */
  --black-900: #0B0B0C;   /* primary page background */
  --black-850: #111113;   /* raised background */
  --char-800:  #18181B;   /* card / surface */
  --char-700:  #212126;   /* elevated card, input */
  --char-600:  #2C2C32;   /* border-strong, hover surface */
  --steel-500: #3A3A42;   /* hairline borders, dividers */
  --steel-400: #54545E;   /* disabled, faint icon */
  --steel-300: #7A7A86;   /* muted text */
  --ash-200:   #A8A8B2;   /* secondary text */
  --ash-100:   #D5D5DA;   /* body text on dark */
  --white:     #F7F6F3;   /* high-emphasis text, concrete white */

  /* --- Gold: the metallic brand spine --- */
  --gold-deep:    #8A5E12;  /* engraved shadow side */
  --gold-700:     #B8841C;  /* pressed / dark gold */
  --gold-500:     #E0A82E;  /* PRIMARY brand gold */
  --gold-400:     #EFC14F;  /* hover gold */
  --gold-300:     #F4D27A;  /* highlight / specular */
  --gold-tint:    rgba(224, 168, 46, 0.12); /* gold wash on dark */

  /* Metallic gold gradient (badges, rules, foil text) */
  --grad-gold: linear-gradient(170deg, #F4D27A 0%, #E0A82E 38%, #B8841C 70%, #8A5E12 100%); /* @kind color */
  --grad-gold-soft: linear-gradient(180deg, #EFC14F 0%, #C8901E 100%); /* @kind color */

  /* --- Semantic status --- */
  --safety-green: #4FA85B;  /* "Safe" / success / licensed check */
  --hazard-red:   #D2462F;  /* danger / demo / error */
  --hazard-amber: #E0892E;  /* caution / warning */
  --info-steel:   #5B8BB0;  /* informational */

  /* --- Semantic aliases (use these in UI) --- */
  --bg-page:        var(--black-900);
  --bg-raised:      var(--black-850);
  --surface-card:   var(--char-800);
  --surface-input:  var(--char-700);
  --surface-hover:  var(--char-600);

  --text-strong:    var(--white);
  --text-body:      var(--ash-100);
  --text-muted:     var(--ash-200);
  --text-faint:     var(--steel-300);
  --text-gold:      var(--gold-500);
  --text-on-gold:   var(--black-950);

  --border-hairline: var(--steel-500);
  --border-strong:   var(--char-600);
  --border-gold:     var(--gold-700);

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-400);
  --accent-press:   var(--gold-700);

  --focus-ring:     rgba(224, 168, 46, 0.55);
  --overlay-scrim:  rgba(6, 6, 6, 0.72);
}