/*
 * tokens.css — Crisol MCP design tokens (v1.1 Phase 62, Plan 62-01).
 *
 * Single source of visual truth: CSS custom properties for the whole product web
 * (landing + frontoffice + backoffice). Ported verbatim from the design handoff
 * (design_handoff_crisol_mcp/README.md → "Design Tokens"). This file holds ONLY
 * :root variables + the IBM Plex font import — NO component styles (those land in
 * Plan 62-02 components). Served from /static/css/tokens.css.
 */

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

:root {
  /* ---- Type families ---- */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- Surface ---- */
  --bg: #f6f5f1;            /* app background */
  --surface: #ffffff;       /* cards */
  --surface-soft: #fbfaf7;  /* sidebar, inputs */
  --surface-muted: #f0efe9; /* neutral chips */
  --border: #e7e4dc;
  --border-soft: #edeae2;   /* separators */

  /* ---- Text ---- */
  --ink: #1c1b19;
  --ink-2: #34322d;
  --muted: #56544d;
  --muted-2: #7a786f;
  --faint: #a6a399;

  /* ---- Accent (logo blue) ---- */
  --accent: #34669a;
  --accent-bg: #e9eff5;
  --accent-border: #cfdce9;
  --accent-ink: #294e74;

  /* ---- State: OK ---- */
  --ok: #1f9d57;
  --ok-bg: #e9f6ee;
  --ok-border: #cbe9d5;
  --ok-ink: #1f7a45;

  /* ---- State: warning ---- */
  --warn: #e0a93b;
  --warn-bg: #fbf0db;
  --warn-border: #efddb4;
  --warn-ink: #9a6a16;

  /* ---- State: danger ---- */
  --danger: #d4524a;
  --danger-bg: #fdeceb;
  --danger-border: #f3cdc9;
  --danger-ink: #b4322b;

  /* ---- Landing: dark security band ---- */
  --dark-band: #181b22;

  /* ---- Radius ---- */
  --radius-control: 9px;   /* buttons, inputs, chip-badges, mark */
  --radius-card: 14px;     /* cards (13-15px) */
  --radius-pill: 999px;    /* pills / badges */

  /* ---- Shadow ---- */
  --shadow-card: 0 1px 2px rgba(28, 27, 25, 0.04);
  --shadow-hero: 0 24px 60px -24px rgba(28, 27, 25, 0.22); /* landing hero mock */

  /* ---- Toggle switch ---- */
  --toggle-on: var(--accent);
  --toggle-off: #d8d4c9;
  --toggle-mixed: #9fb6cf; /* partial / aria-checked="mixed" */
}