/* ============================================================
   TravelMoreRV Product Design System — tokens.css  (v2)
   Shared across all apps in the portal. Fuel Dashboard is the
   first implementation. Import this before any app-specific CSS.

   v2 — "My Fuel Savings" brand pass. Palette moved to the dark
   product-suite system (canvas #0A1420, card #0F1E30) and the
   BRAND/CTA ROLE MOVED FROM ORANGE TO LIME:
     - lime  (--green)  is now the PRIMARY brand + CTA color
     - orange (--orange) is now ALERTS / attention accent ONLY
   Every existing variable NAME is preserved (no page breaks);
   only values, the two brand-colored primitives (.btn-primary,
   badges), and the font stack changed. Fonts: Anton stays for
   big numbers + the wordmark (heavy/robust); body moved
   Inter -> Public Sans; added Archivo (headings) + IBM Plex
   Mono (tabular). Nav/labels stay Oswald.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Oswald:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Base ---- */
  --navy-bg:      #0A1420;   /* page background (canvas) */
  --panel:        #0F1E30;   /* card background, dark end of gradient */
  --panel-2:      #13243A;   /* card background, light end of gradient */
  --panel-border: #22344C;   /* card borders, dividers */

  /* ---- Accents (each has a ROLE, not just a look) ---- */
  --green:        #A6E22E;   /* PRIMARY brand + CTA; savings, positive, success */
  --green-bright: #BCF24E;   /* hover/emphasis state of green */
  --green-deep:   #7BAE22;   /* darker lime, for on-light or pressed states */
  --blue:         #4EA1FF;   /* data accent: volume/gallons, neutral info */
  --gold:         #E6B33E;   /* data accent: pricing, rates, chart variety */
  --orange:       #FF8A42;   /* ALERTS / attention accent (NO LONGER brand/CTA) */
  --orange-hover: #FF9D5E;
  --purple:       #8E72C6;   /* RARE: premium/entitlement tier only */
  --red:          #E04A2F;   /* negative deltas, errors, destructive actions */

  /* ---- Text ---- */
  --text:         #EDF1F6;   /* primary text */
  --text-soft:    #C7D0DC;   /* secondary text, slightly dimmed */
  --dim:          #8C96A6;   /* muted text, labels */
  --dim-2:        #5E6B7D;   /* most-muted text, fine print */

  /* ---- Type ---- */
  --font-display: 'Anton', sans-serif;          /* big numbers / hero figures + wordmark (heavy) */
  --font-heading: 'Archivo', sans-serif;        /* section headings */
  --font-label:   'Oswald', sans-serif;         /* headers, nav, labels, buttons */
  --font-body:    'Public Sans', sans-serif;    /* body copy, table cells, form fields */
  --font-mono:    'IBM Plex Mono', monospace;   /* tabular numbers, monospaced data */

  /* ---- Layout ---- */
  --radius:      12px;
  --radius-sm:   8px;
  --gap:         16px;
  --shadow-card: 0 8px 24px rgba(0,0,0,.35);
  --transition:  160ms ease;
}

/* ---- Shared primitives usable by any app ---- */

.card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
}

/* PRIMARY CTA — brand color is now lime (was orange). */
.btn-primary {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--green);
  color: var(--navy-bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover { background: var(--green-bright); }

/* SECONDARY — lime outline that fills on hover. */
.btn-secondary {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-secondary:hover { background: var(--green); color: var(--navy-bg); }

.badge {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-success { background: rgba(166,226,46,.15); color: var(--green); }
.badge-pending { background: rgba(230,179,62,.15); color: var(--gold); }
.badge-error   { background: rgba(224,74,47,.15);  color: var(--red); }
.badge-info    { background: rgba(78,161,255,.15); color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}