/* ============================================================
   Lightfoot — Colors
   A short, saturated palette used in big confident blocks.
   No pastels, no muddy mids, no gradients-on-gradients.
   ============================================================ */

:root {
  /* ---- Brand core (canonical hex) ---- */
  --lf-solar-orange: #F26B1F; /* primary warm — the road, the big CTA */
  --lf-sky-blue:     #6FB3D2; /* primary cool — the sky */
  --lf-sun-yellow:   #FFD23F; /* the swift badge, the CTA arrow tip */
  --lf-road-navy:    #2E3A6B; /* the cool stripe, text on warm surfaces */
  --lf-bone:         #F4EFE6; /* warm cream — echoes the scooter body */
  --lf-asphalt:      #0B0B0B; /* wordmark, body text, button bodies */

  /* ---- Solar Orange ramp ---- */
  --lf-orange-100: #FDE7D6;
  --lf-orange-200: #FBC9A3;
  --lf-orange-300: #F8A231; /* warm secondary (from RGB palette) */
  --lf-orange-400: #F58A2A;
  --lf-orange-500: #F26B1F; /* = solar orange */
  --lf-orange-600: #D25512;
  --lf-orange-700: #A8420E;

  /* ---- Sky Blue → Navy ramp (from the official RGB palette) ---- */
  --lf-sky-100:  #E4EEF3;
  --lf-sky-200:  #B9D4E2;
  --lf-sky-300:  #7E9EB7; /* RGB 126/158/183 */
  --lf-sky-400:  #6FB3D2; /* = sky blue */
  --lf-navy-300: #6E78A4; /* RGB 110/120/164 */
  --lf-navy-400: #4F5978; /* RGB 79/89/120 */
  --lf-navy-500: #2E3A6B; /* = road navy */
  --lf-navy-700: #162448; /* RGB 22/36/72 — deepest cool */

  /* ---- Sun Yellow ramp ---- */
  --lf-yellow-300: #FFE07A;
  --lf-yellow-400: #FDD847; /* RGB 253/216/71 */
  --lf-yellow-500: #FFD23F; /* = sun yellow */
  --lf-yellow-600: #E8B400;

  /* ---- Neutrals (warm-leaning, built around Bone + Asphalt) ---- */
  --lf-bone:       #F4EFE6;
  --lf-bone-deep:  #EBE3D4; /* slightly deeper cream for edges/dividers */
  --lf-white:      #FFFFFF;
  --lf-ink-900:    #0B0B0B; /* asphalt */
  --lf-ink-700:    #232323;
  --lf-ink-500:    #4A4A46;
  --lf-ink-300:    #8C877D; /* muted warm gray on bone */
  --lf-line:       #DED6C6; /* hairline on bone */

  /* ---- Semantic status (kept in-family, not generic) ---- */
  --lf-go:      #1F8A4C; /* charged / success — a leafy green */
  --lf-caution: #F8A231; /* low-ish / warning — solar amber */
  --lf-stop:    #D2371F; /* error — a warm red, not pink */

  /* ============================================================
     Semantic aliases — reach for these in product UI
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--lf-bone);
  --surface-card:      var(--lf-white);
  --surface-raised:    var(--lf-white);
  --surface-sunk:      var(--lf-bone-deep);
  --surface-inverse:   var(--lf-asphalt);
  --surface-brand:     var(--lf-solar-orange);
  --surface-cool:      var(--lf-navy-500);
  --surface-sky:       var(--lf-sky-blue);

  /* Text */
  --text-strong:    var(--lf-asphalt);
  --text-body:      var(--lf-ink-700);
  --text-muted:     var(--lf-ink-300);
  --text-on-brand:  var(--lf-white);
  --text-on-cool:   var(--lf-bone);
  --text-on-dark:   var(--lf-bone);
  --text-link:      var(--lf-solar-orange);
  --text-link-hover:var(--lf-orange-700);

  /* Lines & borders */
  --border-hairline: var(--lf-line);
  --border-strong:   var(--lf-asphalt);

  /* Accents */
  --accent-warm:  var(--lf-solar-orange);
  --accent-cool:  var(--lf-sky-blue);
  --accent-pop:   var(--lf-sun-yellow);
  --accent-deep:  var(--lf-road-navy);

  /* Focus ring */
  --focus-ring: var(--lf-road-navy);
}