/* ============================================================================
   fi-theme.css — Sto Field Intelligence design tokens (single source of truth).

   Loaded on every page. The palette lives here ONCE as CSS variables; apps
   reference var(--token) instead of hardcoding hex values. A theme is just a
   different set of values for these variables:

     no attribute / [data-theme="dark"]  -> dark (default, current look)
     [data-theme="light"]                -> light
     [data-theme="auto"]                  -> follow the device setting

   The light values are staged here; each app is being converted to use these
   tokens so light mode applies cleanly across the whole suite.
   ========================================================================== */

:root, :root[data-theme="dark"] {
  /* surfaces */
  --bg:#1A1A1A;
  --panel:#222221;
  --panel-2:#1E1E1D;
  --raise:#2A2A28;
  --line:#383734;
  --line-soft:#2E2D2B;

  /* text */
  --text:#F2F0EA;
  --muted:#9A958B;
  --muted-2:#6F6B63;

  /* Sto brand */
  --sto:#F5C200;
  --sto-bright:#FFD23A;
  --sto-soft:rgba(245,194,0,.13);
  --sto-line:rgba(245,194,0,.34);
  --sto-ink:#1A1A1A;          /* text/ink that sits on a --sto fill */

  /* status */
  --ok:#7FA84B;
  --bad:#E5765A;
  --warn:#E0A53A;
  --alert:#D8612C;

  /* inverted surfaces (toasts/snackbars stay dark in both themes) */
  --toast-bg:#0E0E0D;
  --toast-text:#F2F0EA;

  /* app banner — always a black bar with white elements, both themes */
  --banner-bg:#1A1A1A;
  --banner-text:#F2F0EA;
  --banner-muted:#9A9A9A;
  --banner-line:rgba(255,255,255,.10);

  /* shape, type, layout (theme-independent) */
  --radius:12px;
  --radius-sm:8px;
  --mono:"SFMono-Regular",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:720px;
  --shadow:0 14px 44px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* ---- Light --------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg:#F3F1EA;
  --panel:#FFFFFF;
  --panel-2:#FAF8F2;
  --raise:#ECE8DE;
  --line:#D8D3C7;
  --line-soft:#E7E2D6;

  --text:#1A1A1A;
  --muted:#6B675E;
  --muted-2:#928D82;

  --sto:#F5C200;
  --sto-bright:#E0B000;
  --sto-soft:rgba(245,194,0,.16);
  --sto-line:rgba(245,194,0,.5);
  --sto-ink:#1A1A1A;

  --ok:#3C8C4E;
  --bad:#C0492F;
  --warn:#B97A12;
  --alert:#B14E1E;
  --toast-bg:#2A2A28;
  --toast-text:#F8F6F0;

  --shadow:0 14px 44px rgba(60,55,40,.18);

  color-scheme: light;
}

/* ---- Auto: follow the device when set to "auto" -------------------------- */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:#F3F1EA;
    --panel:#FFFFFF;
    --panel-2:#FAF8F2;
    --raise:#ECE8DE;
    --line:#D8D3C7;
    --line-soft:#E7E2D6;
    --text:#1A1A1A;
    --muted:#6B675E;
    --muted-2:#928D82;
    --sto:#F5C200;
    --sto-bright:#E0B000;
    --sto-soft:rgba(245,194,0,.16);
    --sto-line:rgba(245,194,0,.5);
    --sto-ink:#1A1A1A;
    --ok:#3C8C4E;
    --bad:#C0492F;
    --warn:#B97A12;
    --alert:#B14E1E;
    --toast-bg:#2A2A28;
    --toast-text:#F8F6F0;
    --shadow:0 14px 44px rgba(60,55,40,.18);
    color-scheme: light;
  }
}

/* ---- theme-aware logo swap (dark-lettering logo in light mode) ------------ */
/* :root prefixes raise specificity above each app's own .fi-foot-logo rule */
:root .logo-light{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:inline-block}