/* ============================================================================
   OpenMAO — Foundations: Color + Type
   ----------------------------------------------------------------------------
   Source of truth: the real operator console served from
   ts/src/api/server.ts (deep teal-green ink on near-white), plus the
   governance state enums in ts/src/contracts/models.ts.

   Brand posture: precise, accountable, calm. Infrastructure you can audit.
   No gradient glow, no emoji. Authority comes from clarity.

   The vivid flywheel logo is the ONLY place saturated color appears.
   The product surfaces are restrained green-ink + a single accent.
   ============================================================================ */

/* IBM Plex Sans (UI/body) + IBM Plex Mono (code, labels, IDs).
   The shipping product uses system-ui; the design system standardizes on
   IBM Plex for an engineered, institutional, auditable feel. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* ---- Type families ---------------------------------------------------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (px) -------------------------------------------------- */
  --fs-display: 48px;   --lh-display: 1.04; --ls-display: -0.02em;
  --fs-h1: 34px;        --lh-h1: 1.1;       --ls-h1: -0.015em;
  --fs-h2: 26px;        --lh-h2: 1.18;      --ls-h2: -0.01em;
  --fs-h3: 20px;        --lh-h3: 1.25;      --ls-h3: -0.005em;
  --fs-body-lg: 18px;   --lh-body-lg: 1.55;
  --fs-body: 15px;      --lh-body: 1.6;
  --fs-small: 13px;     --lh-small: 1.5;
  --fs-label: 12px;     --lh-label: 1.3;    --ls-label: 0.08em;  /* mono caps */
  --fs-code: 13.5px;    --lh-code: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radii (engineered, small) ---------------------------------------- */
  --r-xs: 3px;
  --r-sm: 4px;
  --r: 6px;     /* console default */
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---- Elevation (restrained; borders carry most structure) ------------- */
  --shadow-xs: 0 1px 2px rgba(16, 32, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 32, 28, 0.07), 0 1px 2px rgba(16, 32, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 32, 28, 0.08), 0 1px 3px rgba(16, 32, 28, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 32, 28, 0.12), 0 2px 8px rgba(16, 32, 28, 0.06);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);     /* calm, no bounce */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 110ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ======================================================================
     COLOR — LIGHT (default). Green-tinged neutrals from the console.
     ====================================================================== */
  --bg: #ffffff;
  --surface-1: #f6f8f7;   /* console --surface */
  --surface-2: #eef2f0;
  --surface-3: #e6ebe8;

  --fg-1: #16201d;        /* console --ink */
  --fg-2: #5b6b64;        /* muted (tuned from #607069) */
  --fg-3: #8a988f;        /* faint / placeholder */
  --fg-on-accent: #ffffff;

  --line: #d8e0dc;        /* console --line */
  --line-strong: #c3cdc8;

  --accent: #0c6b58;      /* console --accent — the brand green */
  --accent-hover: #0a5849;
  --accent-press: #084536;
  --accent-weak: #e3efe9;     /* subtle tinted fill */
  --accent-weak-line: #bcdccf;

  --danger: #9f2f2f;      /* console --danger */
  --danger-hover: #842626;
  --danger-weak: #f6e4e2;
  --danger-weak-line: #e8c4c0;

  --focus-ring: 0 0 0 3px rgba(12, 107, 88, 0.30);

  /* Terminal / log block (always dark, both themes) */
  --terminal-bg: #101716;
  --terminal-fg: #f4f7f6;
  --terminal-muted: #8fa39b;
  --terminal-line: #243029;

  /* ---- Semantic governance states --------------------------------------
     Families map onto the contract enums:
       neutral  : queued, draft, idle, log_only
       info     : running, in_progress  (active work)
       pending  : pending, require_approval, suspended_approval, proposed,
                  provisional, review
       success  : approved, allow, done, completed, ratified, confirmed, enabled
       danger   : blocked, block, rejected, failed, disabled, stale
  */
  --state-neutral-fg: #5b6b64;  --state-neutral-bg: #eef2f0;  --state-neutral-line: #d3dbd7;
  --state-info-fg:    #2b5c86;  --state-info-bg:    #e7f0f8;  --state-info-line:    #c3d9ec;
  --state-pending-fg: #8a5a00;  --state-pending-bg: #faf0d7;  --state-pending-line: #ecdba8;
  --state-success-fg: #0c6b58;  --state-success-bg: #e3efe9;  --state-success-line: #bcdccf;
  --state-danger-fg:  #9f2f2f;  --state-danger-bg:  #f6e4e2;  --state-danger-line:  #e8c4c0;

  /* ---- Autonomy dial — deepening green = more earned trust -------------- */
  --autonomy-advisory: #8a988f;       /* sage grey — unproven */
  --autonomy-supervised: #2f8f74;     /* default — local release begins here */
  --autonomy-bounded: #0c6b58;        /* core brand green */
  --autonomy-board: #0a4a3c;          /* deepest — future horizon */
  --autonomy-track: #e6ebe8;          /* dial track */

  /* ---- Flywheel accent stops (logo only; never for UI chrome) ----------- */
  --fly-blue: #1f6fe0;
  --fly-indigo: #3b35d6;
  --fly-violet: #7b2fd0;
  --fly-magenta: #d9268f;
  --fly-pink: #ec3a6e;
  --fly-orange: #f0691f;
}

/* ========================================================================
   COLOR — DARK. The terminal block stays dark in both themes.
   ======================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c1211;
  --surface-1: #131b19;
  --surface-2: #1a2422;
  --surface-3: #212d2a;

  --fg-1: #eef2f0;
  --fg-2: #9aa8a1;
  --fg-3: #6b7a73;
  --fg-on-accent: #07140f;

  --line: #25302c;
  --line-strong: #33403b;

  --accent: #2fa98a;       /* lifted for contrast on dark */
  --accent-hover: #45b89b;
  --accent-press: #57c4a8;
  --accent-weak: #122520;
  --accent-weak-line: #234a3f;

  --danger: #df6f6b;
  --danger-hover: #e88884;
  --danger-weak: #271716;
  --danger-weak-line: #4d2b29;

  --focus-ring: 0 0 0 3px rgba(47, 169, 138, 0.34);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);

  --state-neutral-fg: #9aa8a1;  --state-neutral-bg: #1a2422;  --state-neutral-line: #2b3733;
  --state-info-fg:    #7db4e0;  --state-info-bg:    #112330;  --state-info-line:    #294a5e;
  --state-pending-fg: #dba94a;  --state-pending-bg: #271f0f;  --state-pending-line: #4a3d1c;
  --state-success-fg: #46b89a;  --state-success-bg: #122520;  --state-success-line: #234a3f;
  --state-danger-fg:  #e08a86;  --state-danger-bg:  #271717;  --state-danger-line:  #4d2b29;

  --autonomy-advisory: #7b8b83;
  --autonomy-supervised: #34a787;
  --autonomy-bounded: #2fa98a;
  --autonomy-board: #58c9ad;
  --autonomy-track: #212d2a;
}

/* ========================================================================
   BASE — any page linking the foundations gets correct type + surface.
   ======================================================================== */
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, button, input, textarea, select { font-family: inherit; }

/* ========================================================================
   SEMANTIC ELEMENT STYLES — apply these classes, or copy the rules.
   ======================================================================== */
.om-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.om-h1 {
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); color: var(--fg-1); text-wrap: balance;
}
.om-h2 {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); color: var(--fg-1); text-wrap: balance;
}
.om-h3 {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); color: var(--fg-1);
}
.om-body-lg {
  font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
  color: var(--fg-2); text-wrap: pretty;
}
.om-body {
  font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--fg-2); text-wrap: pretty;
}
.om-small {
  font-family: var(--font-sans); font-size: var(--fs-small);
  line-height: var(--lh-small); color: var(--fg-2);
}
/* Mono labels: IDs, field labels, kicker eyebrows, table headers */
.om-label {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-3);
}
.om-code, .om-id {
  font-family: var(--font-mono); font-size: var(--fs-code);
  line-height: var(--lh-code); color: var(--fg-1);
}
.om-id { color: var(--fg-2); }