/* WHEELS — Color tokens
   ----------------------------------------------------------------
   The brand trinity: warm BEIGE-CREAM canvas + dark TEAL-NAVY surfaces
   + a single CORAL accent. Anchored on the WHEELS wordmark colors
   (#f5f5dc cream, #111b1e dark teal-navy), structured in the warm
   editorial spirit of Claude's system. Never pure white, never cool gray. */

:root {
  /* ---- Brand / accent ---------------------------------------- */
  --coral:            #cc785c;  /* signature CTA + full-bleed callouts */
  --coral-active:     #a9583e;  /* press / darker */
  --coral-disabled:   #d9cfc4;  /* desaturated cream-tinted disabled */
  --coral-tint:       #f3e4dc;  /* faint coral wash on cream */

  /* ---- Surfaces — cream side --------------------------------- */
  --canvas:               #f8f7ed;  /* default page floor (warm beige) */
  --surface-soft:         #f2f0e0;  /* soft band / divider fills */
  --surface-card:         #ece9d6;  /* feature + content cards */
  --surface-cream-strong: #e4e0cb;  /* selected tabs, emphasized bands */
  --logo-cream:           #f5f5dc;  /* the wordmark cream, used on dark */

  /* ---- Surfaces — dark side ---------------------------------- */
  --surface-dark:          #111b1e; /* dominant dark teal-navy (logo dark) */
  --surface-dark-elevated: #1b2529; /* elevated cards inside dark bands */
  --surface-dark-soft:     #16201f; /* inner panels inside dark cards */

  /* ---- Hairlines --------------------------------------------- */
  --hairline:       #e0dcc9;  /* 1px borders on cream surfaces */
  --hairline-soft:  #ebe8da;  /* barely-there in-band dividers */
  --hairline-dark:  #2a3539;  /* borders on dark surfaces */

  /* ---- Text -------------------------------------------------- */
  --ink:          #141816;  /* headlines + primary text */
  --body-strong:  #232826;  /* lead paragraphs */
  --body:         #3a3f3c;  /* default running text */
  --muted:        #676b65;  /* sub-headings, breadcrumbs */
  --muted-soft:   #8d9088;  /* captions, fine print */
  --on-coral:     #ffffff;  /* text on coral */
  --on-dark:      #f5f5dc;  /* cream-tinted text on dark */
  --on-dark-soft: #9ba39f;  /* secondary text on dark */

  /* ---- Semantic / status ------------------------------------- */
  --teal:    #5db8a6;  /* "active rental", connection dots */
  --amber:   #e8a55a;  /* category highlights, inline warm accent */
  --success: #5db872;  /* available / verified */
  --warning: #d4a017;  /* warnings */
  --error:   #c64545;  /* validation errors */
  --star:    #e8a55a;  /* rating stars (4.5 ★) */

  /* ================================================================
     SEMANTIC ALIASES — author UI against these, not the raw values.
     ================================================================ */
  --bg-page:            var(--canvas);
  --bg-soft:            var(--surface-soft);
  --bg-card:            var(--surface-card);
  --bg-emphasis:        var(--surface-cream-strong);
  --bg-inverse:         var(--surface-dark);
  --bg-inverse-elev:    var(--surface-dark-elevated);

  --text-heading:       var(--ink);
  --text-body:          var(--body);
  --text-lead:          var(--body-strong);
  --text-muted:         var(--muted);
  --text-faint:         var(--muted-soft);
  --text-on-inverse:    var(--on-dark);
  --text-on-inverse-soft: var(--on-dark-soft);

  --accent:             var(--coral);
  --accent-press:       var(--coral-active);
  --link:               var(--coral);

  --border:             var(--hairline);
  --border-soft:        var(--hairline-soft);
  --border-inverse:     var(--hairline-dark);

  --focus-ring:         rgba(204, 120, 92, 0.30); /* coral @ 30% */
}