/* ============================================================
   Carbon Blast Auto — Colour tokens
   Brand identity: deep black + workshop charcoal + sky-blue.
   "Dry ice" cool blue accent (#38B6FF) used sparingly.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --cb-black:        #000000;  /* logo field, hero backgrounds */
  --cb-ink:          #0B0D0F;  /* near-black page surface */
  --cb-charcoal:     #14171A;  /* primary dark surface */
  --cb-charcoal-2:   #1B1F24;  /* raised dark surface / cards */
  --cb-graphite:     #2A2F35;  /* dark dividers, hovered dark */
  --cb-steel:        #3A4047;  /* muted dark detail */

  --cb-white:        #FFFFFF;
  --cb-paper:        #F6F8FA;  /* light page surface */
  --cb-mist:         #EEF1F4;  /* light section / divider fill */
  --cb-cloud:        #E3E8ED;  /* light card border / hairline */
  --cb-ash:          #C9D1D9;  /* disabled, faint detail */

  /* ---- Accent: dry-ice sky blue ---- */
  --cb-blue:         #38B6FF;  /* primary accent (from wordmark) */
  --cb-blue-bright:  #5EC5FF;  /* hover lift on dark */
  --cb-blue-deep:    #1E9DE8;  /* hover/press on light */
  --cb-blue-press:   #0E83CC;  /* active/pressed */
  --cb-blue-frost:   #BEE6FF;  /* icy highlight, gradients */
  --cb-blue-tint:    rgba(56,182,255,0.12); /* accent wash bg */
  --cb-blue-line:    rgba(56,182,255,0.35); /* accent border */

  /* ---- Neutrals (greys for text) ---- */
  --cb-grey-900:     #14171A;
  --cb-grey-700:     #353B41;
  --cb-grey-600:     #555E66;
  --cb-grey-500:     #6E7882;
  --cb-grey-400:     #97A1AA;
  --cb-grey-300:     #C2C9D0;
  --cb-grey-200:     #DEE3E8;
  --cb-grey-100:     #EEF1F4;

  /* ---- Semantic status (used minimally) ---- */
  --cb-success:      #2FB37A;
  --cb-warning:      #E8A33D;
  --cb-danger:       #E2543F;
  --cb-rust:         #B5613A;  /* "corrosion" reference accent */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Surfaces — light context (default brochure pages) */
  --surface-page:        var(--cb-paper);
  --surface-section:     var(--cb-mist);
  --surface-card:        var(--cb-white);
  --surface-card-hover:  var(--cb-paper);
  --surface-inset:       var(--cb-mist);

  /* Surfaces — dark context (hero, feature bands) */
  --surface-dark:        var(--cb-charcoal);
  --surface-dark-raised: var(--cb-charcoal-2);
  --surface-dark-hover:  var(--cb-graphite);
  --surface-black:       var(--cb-black);

  /* Text — on light */
  --text-strong:    var(--cb-grey-900);
  --text-body:      var(--cb-grey-700);
  --text-muted:     var(--cb-grey-500);
  --text-faint:     var(--cb-grey-400);

  /* Text — on dark */
  --text-on-dark:        var(--cb-white);
  --text-on-dark-muted:  rgba(255,255,255,0.66);
  --text-on-dark-faint:  rgba(255,255,255,0.40);

  /* Accent roles */
  --accent:          var(--cb-blue);
  --accent-hover:    var(--cb-blue-deep);
  --accent-press:    var(--cb-blue-press);
  --accent-on:       #04121C;   /* text on a blue fill */
  --accent-tint:     var(--cb-blue-tint);

  /* Borders / hairlines */
  --border-light:    var(--cb-cloud);
  --border-strong:   var(--cb-grey-200);
  --border-on-dark:  rgba(255,255,255,0.10);
  --border-on-dark-strong: rgba(255,255,255,0.18);

  /* Eyebrow / label accent */
  --eyebrow:         var(--cb-blue);
  --focus-ring:      rgba(56,182,255,0.55);
}