/* ============================================================
   TOKENS — 3rd Sun Labs portal.

   Two themes, from the approved visual directions in
   docs/design-directions/2026-09-17-visual-directions/:

     fieldops  Field Ops — the owner-facing default. A light,
               restrained business-software palette, the idiom
               owners already trust with their numbers.
     slate     Slate & Signal — the opt-in dark option. Graphite
               and amber, not navy and cyan: a dark theme reads
               as an operations tool, never as a console.

   Everything below the theme blocks is semantic. A view styles
   itself from --color-*, --chart-* and friends and never names
   a hex, so a third direction would be one more block here and
   no change anywhere else.
   ============================================================ */
:root{
  --font-body:"Inter","Segoe UI",Arial,sans-serif;
  /* Headings carry hierarchy by weight, not by a second typeface. Kept as a
     token because the dark theme does swap it, and a lot of markup asks. */
  --font-display:var(--font-body);
  --font-num:var(--font-body);
  --radius-sm:10px; --radius-md:14px;
  --transition:160ms ease;
}

/* ---------- Field Ops (default) ---------- */
[data-theme="fieldops"]{
  color-scheme:light;
  --color-bg:#F5F6F8; --color-surface:#FFFFFF;
  --color-text:#101828; --color-text-muted:#667085; --color-text-faint:#98A2B3;
  --color-accent:#2954C8; --accent-wash:#EBF1FF; --on-accent:#FFFFFF;
  --color-border:#E3E6EB; --border-strong:#D0D5DD;

  --card-bg:var(--color-surface);
  --side-bg:var(--color-surface); --top-bg:var(--color-surface);
  --field-bg:#FFFFFF; --hover-bg:#F2F4F7;
  --table-head-bg:#FAFBFC; --row-hover:#FAFBFC;

  --ok:#15803D; --ok-dim:#EAF7EE;
  --warn:#B54708; --warn-dim:#FEF6E7;
  --bad:#B42318; --bad-dim:#FDEDEC;

  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-pop:0 4px 12px rgba(16,24,40,.1),0 1px 3px rgba(16,24,40,.06);

  --chart-line:#2954C8; --chart-fill:rgba(41,84,200,.16);
  --chart-bar:#2954C8; --chart-bar-cmp:#D7DEEA;

  --chip-user:#EBF1FF; --chip-user-b:#C3D3F5;
}

/* ---------- Slate & Signal (opt-in dark) ---------- */
[data-theme="slate"]{
  color-scheme:dark;
  --font-body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --font-display:var(--font-body);
  /* The dark theme sets its numbers in mono. Tabular figures are what make a
     column of money scannable on a dark surface, where weight reads weaker. */
  --font-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --color-bg:#121417; --color-surface:#1B1E23;
  --color-text:#E7E8EA; --color-text-muted:#9BA0A8; --color-text-faint:#6B7078;
  --color-accent:#D9A441; --accent-wash:rgba(217,164,65,.12); --on-accent:#191305;
  --color-border:#2B2F36; --border-strong:#3A3F47;

  --card-bg:var(--color-surface);
  --side-bg:var(--color-surface); --top-bg:var(--color-surface);
  --field-bg:#15181C; --hover-bg:#20242B;
  --table-head-bg:#181A1F; --row-hover:#20242B;

  --ok:#5FB98A; --ok-dim:rgba(95,185,138,.12);
  --warn:#E0A94A; --warn-dim:rgba(224,169,74,.12);
  --bad:#E0725A; --bad-dim:rgba(224,114,90,.12);

  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 4px 14px rgba(0,0,0,.5);

  --chart-line:#D9A441; --chart-fill:rgba(217,164,65,.18);
  --chart-bar:#D9A441; --chart-bar-cmp:#33363D;

  --chip-user:rgba(217,164,65,.14); --chip-user-b:rgba(217,164,65,.32);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-width:320px;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease;
}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.25;margin:0;letter-spacing:-.01em}