/* eLink design tokens — the single source for the whole app.
   Kept in its own file so admin.html can adopt the design system WITHOUT
   inheriting style.css's driver-app component rules. Those two collide: both
   define .nav-item, .btn, .modal, .card and a dozen more, and the driver's
   bottom-nav .nav-item (flex-direction: column) silently wrecked the admin
   sidebar when admin linked style.css directly.

   Load order: tokens.css first, then any page CSS. */
/* ===========================================================================
   Design tokens — the single source for the whole app.
   ---------------------------------------------------------------------------
   There used to be three competing palettes: this file's original
   --primary/--gray-* set, and a separate one defined inline in each of the
   admin and profile mockups. admin.html did not even link this stylesheet.
   Anything built against one of them drifted from the other two.

   This block is now canonical: index.html, profile.html and admin.html all link
   it and all draw from these names. The sage-tinted neutrals and the forest-ink
   surface come from the admin redesign spec; the on-ink variants come from the
   profile spec, where the wallet slab is the first *content* placed on ink
   rather than just chrome.

   The legacy --primary / --gray-* names are kept below as aliases so existing
   driver-app CSS keeps working. Prefer the semantic names in new code.
   =========================================================================== */
:root {
  /* Brand */
  --brand: #7CB342;
  --brand-dark: #689F38;
  --brand-light: #9CCC65;
  --brand-tint: #EEF5E6;

  /* Forest-ink surface (sidebar chrome, wallet slab) */
  --ink: #14211B;
  --ink-2: #1C2C24;
  --ink-3: #25392F;
  --ink-fg: #DCE6DE;
  --ink-fg-dim: #7E8C82;
  --ink-fg-muted: #8E9C92;          /* locked-control label on ink — 5.05:1 on --ink-2 */

  /* Page + card surfaces */
  --bg: #F5F7F4;
  --surface: #FFFFFF;
  --surface-2: #FAFBFA;
  --border: #E4E9E3;
  --border-2: #EDF1EC;

  /* Text */
  --text: #1A241E;
  --text-muted: #657064;
  /* Was #93A093 — 2.53:1 on --bg, 2.73:1 on --surface, i.e. below WCAG AA (4.5)
     while being used for real 12px text (the "member since" line, input
     placeholders). Measured as painted in a browser, not from source. */
  --text-faint: #667263;            /* 4.69:1 on --bg, 5.06:1 on --surface */

  /* Feedback. NOTE: these replace the previous --success/--danger/--warning
     values app-wide, so the driver app's greens/reds/ambers shift slightly.
     That is deliberate — one palette, not two. */
  --success: #2E9E5B;
  --success-tint: #E7F4EC;
  --danger: #E5484D;
  --danger-tint: #FCEBEC;
  /* Was #D9930A — 2.29:1 on its own tint and 2.58:1 on --surface, below AA
     even though it is used as TEXT (.pill.charging, .callout b) and not only
     as a fill. */
  --warning: #8F6100;               /* 4.80:1 on --warning-tint, 5.42:1 on --surface */
  --warning-tint: #FBF0DC;
  --info: #3B82C4;
  --info-tint: #E8F1F9;

  /* Feedback colors legible on the ink surface (contrast-checked) */
  --danger-on-ink: #FFC9CB;         /* 9.9:1 */
  --danger-tint-ink: rgba(229, 72, 77, .16);
  --warning-on-ink: #F2C879;        /* 7.8:1 */
  --warning-tint-ink: rgba(217, 147, 10, .18);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20, 33, 27, .06);
  --shadow-card: 0 1px 3px rgba(20, 33, 27, .07), 0 1px 2px rgba(20, 33, 27, .04);
  --shadow-pop: 0 10px 30px rgba(20, 33, 27, .14);
  --shadow-ink: 0 6px 22px rgba(20, 33, 27, .20);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Metrics */
  --radius: 16px;
  --radius-sm: 8px;
  --sidebar-w: 250px;
  --topbar-h: 56px;
  --measure: 720px;
  --bottom-nav-height: 56px;
  /* Actual rendered header height (logo + vertical padding). The search bar and
     connection banner anchor to this; keep it in sync with the .header/.logo
     sizes in the breakpoint blocks below so the search bar clears the header. */
  --header-height: 58px;

  /* --- Legacy aliases -----------------------------------------------------
     Kept so the existing driver-app rules keep resolving. --primary and --brand
     were already the same green, so nothing changes there. The grays map onto
     the closest sage-tinted neutral rather than staying pure gray, which is
     what removes the "two different greys on one screen" effect. */
  --primary: var(--brand);
  --primary-dark: var(--brand-dark);
  --primary-light: var(--brand-light);
  --gray-100: var(--bg);
  --gray-200: var(--border);
  --gray-300: #D3DAD1;
  --gray-500: var(--text-muted);
  --gray-600: #55604F;
  --gray-700: #3C4738;
  --gray-900: var(--text);
  --shadow: var(--shadow-card);
  --shadow-lg: 0 10px 15px -3px rgba(20, 33, 27, .10), 0 4px 6px -2px rgba(20, 33, 27, .05);
  --shadow-xl: var(--shadow-pop);
}