/* ============================================================
   DriveHip Driver — Design Tokens
   Brand: Amber (#F06E00) · Inter Tight · Paper light-first,
   with a dark "premium" theme for Home / immersive navigation.

   Tokens are THEME-AWARE: light values live on :root, the .dark
   class overrides them. Components reference the semantic names,
   so a screen re-themes just by adding/removing .dark.
   ============================================================ */

:root {
  /* ---- Brand (fixed across themes) ------------------------ */
  --amber:        #F06E00;   /* Primary                        */
  --amber-glow:   #FF8A33;   /* highlight                      */
  --amber-press:  #D55F00;   /* pressed                        */
  --gold-grad:    linear-gradient(135deg,#FF8A33 0%,#F06E00 58%,#D55F00 100%);
  --on-amber:     #FFFFFF;   /* text/icon on amber             */

  /* legacy accent aliases (kept so existing rules keep working) */
  --gold:         var(--amber);
  --gold-lite:    var(--amber-glow);
  --gold-deep:    var(--amber-press);

  /* ---- Status ------------------------------------------- */
  --green:        #22C55E;   /* success                        */
  --green-deep:   #16A34A;
  --warning:      #F59E0B;
  --red:          #EF4444;   /* error                          */
  --blue:         #3B82F6;

  /* ============================================================
     LIGHT theme — the app's primary identity (Paper, warm)
     ============================================================ */
  --obsidian:     #050505;   /* deepest dark (splash/map canvas)*/
  --bg:           #F8F6F2;   /* Paper                          */
  --cockpit:      #F8F6F2;   /* app background (alias)         */
  --cockpit-2:    #FFFFFF;   /* sheet / panel                  */
  --sheet:        #FFFFFF;
  --surface:      #FFFFFF;   /* Paper Raised — cards           */
  --leather:      #F1ECE3;   /* soft raised fill (inputs)      */
  --leather-2:    #ECE7DE;
  --soft:         #F2EEE7;   /* chips / icon-buttons           */
  --soft-2:       #ECE7DE;

  --ink:          #111111;   /* primary text                   */
  --ink-2:        #6B7280;   /* Ink Mid                        */
  --ink-3:        #9CA3AF;   /* Ink Dim                        */
  --ink-4:        #C7CBD1;   /* faint                          */

  --hairline:     #ECE8E1;   /* soft border                    */
  --hairline-2:   #E2DDD4;

  --card-bg:      #FFFFFF;
  --card-border:  #ECE8E1;

  --accent-soft:  rgba(240,110,0,.10);
  --accent-line:  rgba(240,110,0,.28);
  --slider-bg:    #FFFFFF;
  --slider-shadow: inset 0 1px 2px rgba(17,17,17,.06);
  --dot-halo:     rgba(17,17,17,.06);
  --scrim:        rgba(255,255,255,.74);
  --map-bg:       #0d0d11;   /* the live map stays dark        */

  /* ---- Elevation (soft) --------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17,17,17,.05), 0 6px 16px rgba(17,17,17,.05);
  --shadow-md: 0 10px 30px rgba(17,17,17,.10);
  --shadow-lg: 0 24px 60px rgba(17,17,17,.16);
  --shadow-gold: 0 12px 28px rgba(240,110,0,.32);

  /* ---- Radius ------------------------------------------- */
  --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 34px; --r-pill: 999px;

  /* ---- Motion ------------------------------------------- */
  --dur: 300ms; --dur-fast: 180ms; --dur-slow: 560ms;
  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* ---- Type ---------------------------------------------
     Inter Tight everywhere. Scale: Giant 52 · Display 34 ·
     H1 28 · H2 22 · H3 18 · Body 16 · Caption 13 (tnum for data) */
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tnum: var(--font);
}

/* ============================================================
   DARK theme — "Home / premium", used on splash + live map
   ============================================================ */
.dark {
  --bg:           #050505;
  --cockpit:      #050505;
  --cockpit-2:    #111111;   /* Sheet                          */
  --sheet:        #111111;
  --surface:      #17171B;   /* glass card                     */
  --leather:      #1E1E24;
  --leather-2:    #26262E;
  --soft:         rgba(255,255,255,.06);
  --soft-2:       rgba(255,255,255,.10);

  --ink:          #FFFFFF;
  --ink-2:        #A6A6AD;
  --ink-3:        #6E6E77;
  --ink-4:        #48484F;

  --hairline:     rgba(255,255,255,.08);
  --hairline-2:   rgba(255,255,255,.14);

  --card-bg:      rgba(255,255,255,.045);
  --card-border:  rgba(255,255,255,.08);

  --accent-soft:  rgba(240,110,0,.16);
  --accent-line:  rgba(240,110,0,.34);
  --slider-bg:    rgba(255,255,255,.05);
  --slider-shadow: inset 0 2px 8px rgba(0,0,0,.4);
  --dot-halo:     rgba(255,255,255,.08);
  --scrim:        rgba(5,5,7,.72);
  --map-bg:       #0d0d11;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 12px 34px rgba(0,0,0,.45);
  --shadow-lg: 0 26px 70px rgba(0,0,0,.55);
  --shadow-gold: 0 14px 40px rgba(240,110,0,.42);
}