/* ForeDrive — "Sunrise" theme (option 3c)
   Drop-in CSS custom properties + the handful of primitives the mockup uses.
   Import once at the root of the app, above your own styles. */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap");

:root {
  /* — ground & ink — */
  --fd-bg:            #fffaf3;  /* app background, sheets, cards */
  --fd-surface:       #f6ece0;  /* map ground, inset panels */
  --fd-surface-2:     #f0e5d8;  /* progress tracks, dividers-as-fills */
  --fd-hairline:      #e0d2c1;  /* 1px rules, sheet grab handle */
  --fd-map-road:      #eddfcd;  /* road network on the basemap */
  --fd-map-park:      #ece2d0;  /* parks / land polygons */
  --fd-map-water:     #e5ded0;

  --fd-ink:           #2b1b3d;  /* primary text, dark chips */
  --fd-ink-muted:     #6b5c63;  /* secondary text — AA at 12px on --fd-bg */
  --fd-ink-inverse:   #fffaf3;  /* text on --fd-ink / --fd-primary */

  /* — severity ramp: cream → plum, one continuous heat scale — */
  --fd-sev-1:         #ffd9a8;  /* clear */
  --fd-sev-2:         #f2a66a;  /* cloud */
  --fd-sev-3:         #e2664f;  /* rain */
  --fd-sev-4:         #a3324f;  /* snow / ice / severe */

  /* — action — */
  --fd-primary:       #c44a34;  /* buttons, active states. AA with --fd-ink-inverse */
  --fd-primary-hover: #a93c28;
  --fd-primary-press: #8e3120;
  --fd-accent:        #e2664f;  /* decorative + 18px-and-up type only (3:1) */
  --fd-focus:         #2b1b3d;

  /* — radius — */
  --fd-r-sm:  12px;   /* chips, small controls */
  --fd-r-md:  16px;   /* cards, buttons, banners */
  --fd-r-lg:  22px;   /* floating search pill */
  --fd-r-xl:  26px;   /* bottom sheet top corners */
  --fd-r-pill: 999px;

  /* — spacing (4px base) — */
  --fd-s-1: 4px;  --fd-s-2: 8px;  --fd-s-3: 12px;
  --fd-s-4: 16px; --fd-s-5: 20px; --fd-s-6: 24px; --fd-s-8: 32px;

  /* — elevation — */
  --fd-shadow-sm:    0 2px 8px rgba(43, 27, 61, .10);
  --fd-shadow-md:    0 4px 18px rgba(43, 27, 61, .14);
  --fd-shadow-sheet: 0 -8px 30px rgba(43, 27, 61, .14);

  /* — type — */
  --fd-font: "Figtree", system-ui, -apple-system, sans-serif;
  --fd-t-title:   800 21px/1.15 var(--fd-font);
  --fd-t-score:   900 27px/1    var(--fd-font);
  --fd-t-body:    400 13px/1.5  var(--fd-font);
  --fd-t-meta:    400 12px/1.4  var(--fd-font);
  --fd-t-label:   600 12px/1.3  var(--fd-font);
  --fd-t-button:  800 13px/1    var(--fd-font);
}

/* ————— primitives ————— */

body {
  margin: 0;
  background: var(--fd-bg);
  color: var(--fd-ink);
  font: var(--fd-t-body);
  -webkit-font-smoothing: antialiased;
}

.fd-muted { color: var(--fd-ink-muted); }

.fd-btn {
  display: inline-flex; align-items: center; gap: var(--fd-s-2);
  border: 0; cursor: pointer;
  font: var(--fd-t-button);
  padding: 14px 18px;
  border-radius: var(--fd-r-md);
  background: var(--fd-primary); color: var(--fd-ink-inverse);
  transition: background .15s ease;
}
.fd-btn:hover  { background: var(--fd-primary-hover); }
.fd-btn:active { background: var(--fd-primary-press); }
.fd-btn-dark      { background: var(--fd-ink); }
.fd-btn-dark:hover{ background: #3d2954; }
.fd-btn-quiet {
  background: transparent; color: var(--fd-ink);
  box-shadow: inset 0 0 0 1.5px var(--fd-hairline);
}
.fd-btn-quiet:hover { background: var(--fd-surface); }
.fd-btn-block { width: 100%; justify-content: space-between; }

:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }

.fd-card {
  background: var(--fd-bg);
  border-radius: var(--fd-r-md);
  box-shadow: var(--fd-shadow-md);
  padding: var(--fd-s-4);
}

/* floating map search pill */
.fd-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--fd-bg);
  border-radius: var(--fd-r-lg);
  padding: 12px 16px;
  box-shadow: var(--fd-shadow-md);
}

/* draggable bottom sheet */
.fd-sheet {
  background: var(--fd-bg);
  border-radius: var(--fd-r-xl) var(--fd-r-xl) 0 0;
  box-shadow: var(--fd-shadow-sheet);
  padding: 10px 0 18px;
  transition: height .26s cubic-bezier(.32, .72, 0, 1);
}
.fd-sheet-handle {
  width: 38px; height: 4px; margin: 0 auto 10px;
  border-radius: 2px; background: var(--fd-hairline);
}

/* verdict banner — dark plum, not a tinted alert box */
.fd-verdict {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--fd-ink); color: var(--fd-ink-inverse);
  border-radius: var(--fd-r-md);
  padding: 12px 16px;
  font: 800 13px/1 var(--fd-font);
}
.fd-verdict span:last-child { font: var(--fd-t-meta); color: #d9c9e0; }

/* severity bar in a waypoint row */
.fd-bar {
  flex: 1; height: 9px; border-radius: 5px;
  background: var(--fd-surface-2); overflow: hidden;
}
.fd-bar > i { display: block; height: 9px; border-radius: 5px; }
.fd-sev-clear > i { width: 24%; background: var(--fd-sev-1); }
.fd-sev-cloud > i { width: 48%; background: var(--fd-sev-2); }
.fd-sev-rain  > i { width: 72%; background: var(--fd-sev-3); }
.fd-sev-snow  > i { width: 96%; background: var(--fd-sev-4); }

/* map hazard pin */
.fd-pin {
  background: var(--fd-sev-4); color: #fff;
  padding: 6px 10px; border-radius: var(--fd-r-pill);
  font: 600 10px/1 var(--fd-font);
  box-shadow: var(--fd-shadow-md);
}

/* ————— notes —————
   Contrast: --fd-ink-muted and --fd-primary are the two values tuned to clear
   4.5:1 on --fd-bg. --fd-accent (#e2664f) does NOT — use it for fills, route
   strokes and 18px+ type only, never 12–14px body copy.

   Route stroke colors on the map are the four --fd-sev-* values at 8px with
   round caps, over a 14px --fd-bg casing.
*/