/* DriveWhip color system.
   Hero = Whip Orange (#FF6221, sampled from the wordmark).
   Base = asphalt near-black + warm off-white.
   Accents = money green (earnings) and signal yellow (highlights/alerts). */

:root {
  /* ---- Brand: Whip Orange ---- */
  --orange-50:  #FFF1EA;
  --orange-100: #FFE0D0;
  --orange-200: #FFC4A6;
  --orange-300: #FF9E6E;
  --orange-400: #FF7C3F;
  --orange-500: #FF6221; /* PRIMARY — sampled from logo */
  --orange-600: #ED4E10;
  --orange-700: #C63D0B;
  --orange-800: #97300C;
  --orange-900: #6E2509;

  /* ---- Asphalt: warm neutral ramp ---- */
  --asphalt-950: #120F0D; /* deepest base, video backgrounds */
  --asphalt-900: #161311;
  --asphalt-800: #221E1A;
  --asphalt-700: #322C27;
  --asphalt-600: #4A423B;
  --asphalt-500: #6B6058;
  --asphalt-400: #8F8379;
  --asphalt-300: #B9AEA2;
  --asphalt-200: #DDD4C8;
  --asphalt-150: #E9E1D6;
  --asphalt-100: #F2EBE1;
  --asphalt-50:  #FAF6F0; /* warm off-white surface */
  --white:       #FFFFFF;

  /* ---- Accents ---- */
  --money-500: #19B26B; /* earnings / "make more $" */
  --money-600: #0E9458;
  --money-100: #D6F4E5;
  --signal-500: #FFC02E; /* highlight / alert / road-sign yellow */
  --signal-600: #E7A413;
  --signal-100: #FFF1CC;

  /* ============ SEMANTIC ALIASES (light / default) ============ */
  --color-primary:        var(--orange-500);
  --color-primary-hover:  var(--orange-600);
  --color-primary-press:  var(--orange-700);
  --color-on-primary:     var(--white);

  --color-bg:             var(--asphalt-50);
  --color-bg-alt:         var(--asphalt-100);
  --color-surface:        var(--white);
  --color-surface-sunken: var(--asphalt-50);

  --color-text:           var(--asphalt-900);
  --color-text-muted:     var(--asphalt-500);
  --color-text-subtle:    var(--asphalt-400);
  --color-on-dark:        var(--asphalt-50);
  --color-on-dark-muted:  var(--asphalt-300);

  --color-border:         var(--asphalt-200);
  --color-border-strong:  var(--asphalt-300);

  --color-money:          var(--money-500);
  --color-signal:         var(--signal-500);

  /* Platform brand colors (used in pills/badges for content) */
  --plat-uber:      #000000;
  --plat-lyft:      #EA0B8C;
  --plat-doordash:  #FF3008;
  --plat-instacart: #43B02A;
  --plat-amazon:    #FF9900;
}

/* ============ DARK / VIDEO SCOPE ============
   Apply `.theme-dark` (or data-theme="dark") to a reel/story root for the
   asphalt-on-orange look that dominates vertical video content. */
.theme-dark,
[data-theme="dark"] {
  --color-bg:             var(--asphalt-950);
  --color-bg-alt:         var(--asphalt-900);
  --color-surface:        var(--asphalt-900);
  --color-surface-sunken: var(--asphalt-800);

  --color-text:           var(--asphalt-50);
  --color-text-muted:     var(--asphalt-300);
  --color-text-subtle:    var(--asphalt-400);

  --color-border:         var(--asphalt-700);
  --color-border-strong:  var(--asphalt-600);
}