@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");

/* ============================================================================
   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 white in every appearance mode */
  --banner-bg:#FFFFFF;
  --banner-text:#1A1A1A;
  --banner-muted:#6B675E;
  --banner-line:#DDD9D0;

  /* shape, type, layout (theme-independent) */
  --radius:12px;
  --radius-sm:8px;
  --mono:Open Sans,Arial,sans-serif;
  --sans:Open Sans,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}

/* ============================================================================
   2026-08-04 brand refinement
   Open Sans is the primary UI face. Arial is the required local fallback.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root, :root[data-theme="dark"] {
  --sans:Open Sans,Arial,sans-serif;
}

:root[data-theme="light"] {
  /* neutral light grey — intentionally not cream/yellow */
  --bg:#F1F1EF;
  --panel:#FFFFFF;
  --panel-2:#F7F7F5;
  --raise:#E8E8E5;
  --line:#CECECA;
  --line-soft:#DEDEDA;
  --text:#161616;
  --muted:#595959;
  --muted-2:#737373;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:#F1F1EF;
    --panel:#FFFFFF;
    --panel-2:#F7F7F5;
    --raise:#E8E8E5;
    --line:#CECECA;
    --line-soft:#DEDEDA;
    --text:#161616;
    --muted:#595959;
    --muted-2:#737373;
  }
}