/* ══════════════════════════════════════════════════════════════════════
   EliteSteer — Design Tokens
   Single source of truth for the app's button and form-field system.
   Plain CSS custom properties, not a build-time theme (this app has no
   build step — see CLAUDE.md/main.js's own comments on that) — every
   value below is read at runtime by custom.css's button/field rules
   (search for "var(--" there) and can be overridden per-theme in
   themes.css using the same [data-theme="x"] { --token: value; }
   pattern already used for colors elsewhere in that file.

   Three button tiers (see custom.css for the actual class rules):
     .btn-primary   — solid gradient fill, rounded-rectangle. The one
                      dominant action in a screen (Search Fleet, Save,
                      Confirm, Submit).
     .btn-secondary — dark outlined pill, icon + label. Supporting
                      actions (Sign In, View, Edit, Cancel).
     .badge         — same pill shape/border language as .btn-secondary,
                      but never interactive (no hover/focus/cursor) —
                      trust indicators and status labels. .pill-badge is
                      a separate, related class for controls that DO
                      need to be clickable (filter chips, the rating
                      picker) — same shape tokens, kept interactive.
   Form fields (input/select/textarea) share the same height, radius,
   and focus-glow accent as the buttons above, so the two read as one
   system rather than two different UI kits glued together.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Shared accent (focus rings, glows) ────────────────────────────── */
  --accent: #22d3ee;
  --accent-rgb: 34, 211, 238;

  /* ── Shared geometry/motion — every tier and every field uses these,
     not its own hardcoded copy ─────────────────────────────────────── */
  --control-height: 44px;                 /* the shared minimum touch target */
  --control-height-sm: 36px;              /* compact contexts (toolbars, table rows) */
  --control-padding-x: 1rem;              /* was 1.25rem — tightened so a pill-shaped
                                              label doesn't float in excess whitespace */
  --control-padding-x-sm: 0.875rem;       /* was 1rem */
  --control-font-size: 0.875rem;
  --control-font-weight: 600;
  --control-icon-gap: 0.375rem;           /* was 0.5rem — icon sits closer to its label */
  --control-radius-rect: 0.75rem;         /* icon-only buttons (.btn-close/.btn-icon-danger) —
                                              a full circle on a square button read as
                                              too heavy, kept as a rounded rectangle */
  --control-radius-pill: 9999px;          /* every labeled button (.btn-primary/
                                              .btn-secondary/.btn-destructive), .badge,
                                              .pill-badge — Search Fleet's fully-rounded
                                              pill shape, the one corner style app-wide */
  --control-transition-duration: 180ms;
  --control-transition-easing: ease-out;
  --control-hover-scale: 1.02;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Primary: solid gradient fill (Search Fleet's existing gradient,
     reused verbatim — not a new color choice) ──────────────────────── */
  --btn-primary-grad-from: #059669;
  --btn-primary-grad-via: #0891b2;
  --btn-primary-grad-to: #2563eb;
  --btn-primary-grad-from-hover: #047857;
  --btn-primary-grad-via-hover: #0e7490;
  --btn-primary-grad-to-hover: #1d4ed8;
  --btn-primary-text: #ffffff;
  --btn-primary-glow: rgba(8, 145, 178, 0.45);
  --btn-primary-glow-2: rgba(37, 99, 235, 0.28);

  /* ── Secondary: dark outlined pill (Create Account's existing
     treatment, reused verbatim) ─────────────────────────────────────── */
  --btn-secondary-bg: rgba(255, 255, 255, 0.10);
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.18);
  --btn-secondary-border: rgba(255, 255, 255, 0.25);
  --btn-secondary-border-hover: rgba(52, 211, 153, 0.55);
  --btn-secondary-text: #ffffff;
  --btn-secondary-glow: rgba(255, 255, 255, 0.22);

  /* ── Destructive: kept separate from the 3 requested tiers (existing,
     pre-dates this token pass) — solid red, same shared geometry ────── */
  --btn-destructive-bg: #dc2626;
  --btn-destructive-bg-hover: #b91c1c;
  --btn-destructive-text: #ffffff;
  --btn-destructive-glow: rgba(220, 38, 38, 0.45);

  /* ── Badge/chip + interactive pill: same shape as Secondary, own
     accent-driven fill (set --pill-accent per instance; falls back to
     --accent) ─────────────────────────────────────────────────────── */
  --pill-accent: var(--accent);

  /* ── Form fields — one height/border/background/radius, focus-glow
     using the same --accent as the buttons above ────────────────────── */
  --field-height: var(--control-height);
  --field-bg: #334155;              /* slate-700 — the app's already-dominant field background */
  --field-border: #475569;          /* slate-600 */
  --field-border-focus: var(--accent);
  --field-radius: var(--control-radius-rect);
  --field-text: #ffffff;
  --field-placeholder: #64748b;     /* slate-500 */
  --field-padding-x: 1rem;
  --field-font-size: 0.875rem;
  --field-glow-focus: rgba(var(--accent-rgb), 0.35);
}