/* ─────────────────────────────────────────────────────────────────────────────
   cloudtoground — shared design tokens (Field Instrument)
   Single source of truth for the site-wide palette. Values mirror the E-Field
   dashboard canon: efield-dashboard-build/src/uiKit.js + the `t` theme object
   (documented in frontend/DESIGN.md). Pages consume these through their own
   local var names (e.g. --accent:var(--ui-accent)) so page CSS never renames.
   Editing a value here restyles every tool that links this file.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* surfaces + lines */
  --ui-bg:#14171B;
  --ui-surface:#1E2229;
  --ui-surface2:#22272F;
  --ui-border:#363E48;
  --ui-border2:#48505B;
  /* text */
  --ui-text:#E8E7E2;
  --ui-text-muted:#A6A9A2;
  --ui-text-dim:#82867E;
  /* accent */
  --ui-accent:#33BACD;
  --ui-accent-soft:rgba(51,186,205,.16);
  --ui-accent2:#4FD0E2;
  --ui-on-accent:#04262B;
  /* semantic — same hue both themes; light legibility by treatment, not recolor */
  --ui-ok:#4ADE80;
  --ui-warn:#F59E0B;
  --ui-err:#EF4444;
  /* controls */
  --ui-input-border:#363E48;
  --ui-hover-overlay:rgba(255,255,255,.06);
  /* shape + depth */
  --ui-radius:4px;
  --ui-shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2);
}
:root[data-theme="light"]{
  --ui-bg:#ECEAE1;
  --ui-surface:#FFFFFF;
  --ui-surface2:#E5E2D9;
  --ui-border:#ADA99E;
  --ui-border2:#9C998F;
  --ui-text:#14171B;
  --ui-text-muted:#42474F;
  --ui-text-dim:#63675E;
  --ui-accent:#0E8C9C;
  --ui-accent-soft:rgba(14,140,156,.18);
  --ui-accent2:#0891A8;
  --ui-input-border:#9C998F;
  --ui-hover-overlay:rgba(0,0,0,.06);
  --ui-shadow:0 1px 3px rgba(20,23,27,.10),0 4px 12px rgba(20,23,27,.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Shared components — one definition for the rules golf + placefile carry
   identically. Selector groups cover both pages' spellings (.btn-primary golf,
   .btn.primary placefile); pages keep only their page-specific props.
   ───────────────────────────────────────────────────────────────────────────── */
::selection{background:var(--ui-accent);color:var(--ui-on-accent)}

/* chrome button base — pages add their residue locally (golf: white-space:nowrap;
   placefile: justify-content/color/background) */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--ui-radius);font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid var(--ui-border)}
.btn.sm{padding:7px 14px;font-size:12px;gap:5px}
/* the one solid-accent commit button */
.btn-primary,.btn.primary{background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent);font-weight:700}
/* hover re-asserts bg/border so a page's .btn:hover background can't repaint a hovered primary */
.btn-primary:hover,.btn.primary:hover{filter:brightness(1.06);background:var(--ui-accent);border-color:var(--ui-accent)}
/* modal action-row buttons (golf .modal-footer, placefile .modal-actions) — canon 10x20/14 */
.modal-footer .btn,.modal-actions .btn{padding:10px 20px;font-size:14px;gap:8px}

/* modal shell — shared core; pages keep their structure (golf: flex-column bars,
   placefile: padded card) and their own size caps */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding:6vh 16px 24px}
.modal-overlay.active,.modal-overlay.visible{display:flex}
.modal{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.5);zoom:var(--ui-scale,1)}