/* web/shared/theme/foglab-theme.css — the foglab.ai palette, one file for every SPA.
 *
 * AGM-8 (steele 2026-10-31): devlog, docs, plan and the rest take their day/night look from
 * THIS token set instead of each carrying its own colours, so a later global theme switch
 * (per profile, per workspace) is one place. The values are the workspace manager's
 * (services/foglab/wsmgrd public/static/css/wsmgr.css), the reference look.
 *
 * Contract (lint in system/pipelines/web/shared/theme):
 *   · palette and shape tokens ONLY — custom properties on :root, html[data-theme=…] and the
 *     prefers-color-scheme block, plus `color-scheme`; no layout, no selectors beyond those;
 *   · light is the default; the system preference flips to dark; an explicit
 *     <html data-theme="light|dark"> wins (the boot script, foglab-theme.js, owns that attribute
 *     and the shared localStorage key `foglab-theme`);
 *   · an SPA maps its own legacy token names onto these (`--panel: var(--bg-soft)`) and keeps
 *     only app-specific tokens (diff colours, kind colours) of its own — never a second palette.
 *
 * Consuming it: copy byte-for-byte to the daemon's static/css/foglab-theme.css and link it
 * BEFORE the SPA's own stylesheet; inline foglab-theme.js in <head> before any stylesheet.
 */

:root {
  color-scheme: light;
  /* Light (default): pearl background, dark-blue ink/accents. */
  --bg:        #f6f4ef;  /* pearl / off-white */
  --bg-soft:   #ffffff;  /* card surface */
  --bg-sunk:   #efece4;  /* sunk inputs / subtle fills */
  --ink:       #131b2e;  /* near dark-blue text */
  --ink-soft:  #4a5269;  /* muted text */
  --ink-faint: #7a8094;  /* very muted */
  --accent:    #1d3a8a;  /* dark blue */
  --accent-2:  #2b50b8;  /* lighter blue (hover) */
  --line:      #e3ddd1;  /* hairline borders */
  --on-accent: #f6f4ef;  /* text on the accent fill */
  --ok:        #1f7a3d;
  --err:       #b3261e;
  --warn:      #b8791f;
  --shadow:    0 1px 2px rgba(19, 27, 46, 0.06), 0 8px 24px rgba(19, 27, 46, 0.05);
  --radius:    0.75rem;
  --radius-sm: 0.45rem;
  --maxw:      64rem;
  --font:      system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Logo visibility flags flipped by theme (1 = shown). */
  --logo-light: inline-block;
  --logo-dark:  none;
}

/* System dark (only when no manual data-theme attribute is present). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #0c1322;  /* near-black dark-blue */
    --bg-soft:   #131c30;
    --bg-sunk:   #0a0f1c;
    --ink:       #f1efe8;  /* pearl text */
    --ink-soft:  #b7bdcc;
    --ink-faint: #828aa0;
    --accent:    #6f8fe8;  /* lighter blue reads on dark */
    --accent-2:  #8aa4ef;
    --line:      #243049;
    --on-accent: #0c1322;
    --ok:        #5fd089;
    --err:       #ff8a80;
    --warn:      #e0a94a;
    --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --logo-light: none;
    --logo-dark:  inline-block;
  }
}

/* Manual LIGHT override (the boot script sets it; beats the @media block). */
html[data-theme="light"] {
  color-scheme: light;
  --bg:        #f6f4ef;
  --bg-soft:   #ffffff;
  --bg-sunk:   #efece4;
  --ink:       #131b2e;
  --ink-soft:  #4a5269;
  --ink-faint: #7a8094;
  --accent:    #1d3a8a;
  --accent-2:  #2b50b8;
  --line:      #e3ddd1;
  --on-accent: #f6f4ef;
  --ok:        #1f7a3d;
  --err:       #b3261e;
  --warn:      #b8791f;
  --shadow:    0 1px 2px rgba(19, 27, 46, 0.06), 0 8px 24px rgba(19, 27, 46, 0.05);
  --logo-light: inline-block;
  --logo-dark:  none;
}

/* Manual DARK override. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0c1322;
  --bg-soft:   #131c30;
  --bg-sunk:   #0a0f1c;
  --ink:       #f1efe8;
  --ink-soft:  #b7bdcc;
  --ink-faint: #828aa0;
  --accent:    #6f8fe8;
  --accent-2:  #8aa4ef;
  --line:      #243049;
  --on-accent: #0c1322;
  --ok:        #5fd089;
  --err:       #ff8a80;
  --warn:      #e0a94a;
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  --logo-light: none;
  --logo-dark:  inline-block;
}