/* Geist (OFL 1.1, fonts/OFL.txt), served locally so a slow network never swaps the font. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
}

/* Omni design tokens (SPEC-DEMO-011, docs/design-system.md).
   The single source of truth for colour, type, space, radius, elevation and motion.
   Framework-agnostic CSS custom properties: the React app (ADR-0010) imports this file
   as is. Components read the semantic tokens (--bg-*, --fg-*, --border-*), never the
   palette steps, so a tenant theme or dark mode only remaps this file. */

:root {
  /* ---- palette: warm neutrals + one accent ---------------------------------------- */
  --gray-0: #ffffff;
  --gray-25: #fbfbfa;
  --gray-50: #f6f6f4;
  --gray-100: #efeeeb;
  --gray-200: #e4e3df;
  --gray-300: #d3d1cb;
  --gray-400: #a8a59d;
  --gray-500: #706d65;
  --gray-600: #625f58;
  --gray-700: #46443f;
  --gray-800: #2b2a27;
  --gray-900: #1a1a18;

  --blue-50: #eef2fe;
  --blue-100: #dce4fd;
  --blue-500: #2f56d9;   /* accent: 6.1:1 on white, white text on it 6.1:1 */
  --blue-600: #2546b8;
  --blue-700: #1d3891;

  --green-50: #e9f5ee;
  --green-200: #b5dcc4;
  --green-600: #1d7a4b;
  --green-700: #155c38;

  --amber-50: #fbf3e2;
  --amber-200: #efd7a3;
  --amber-500: #d99a1e;
  --amber-700: #7f4d00;

  --red-50: #fcecea;
  --red-200: #f3c4be;
  --red-600: #c0362c;
  --red-700: #962519;

  /* ---- semantic: surfaces ---------------------------------------------------------- */
  --bg-canvas: var(--gray-50);       /* page */
  --bg-surface: var(--gray-0);       /* cards, panels, inputs */
  --bg-subtle: var(--gray-25);       /* inset areas: chat scroll, toolbars */
  --bg-sunken: var(--gray-100);      /* wells: kanban columns, segmented track */
  --bg-hover: var(--gray-100);
  --bg-inverse: var(--gray-900);     /* primary button, toasts */
  --bg-accent: var(--blue-500);
  --bg-accent-subtle: var(--blue-50);

  /* ---- semantic: text -------------------------------------------------------------- */
  --fg-default: var(--gray-900);
  --fg-muted: var(--gray-600);       /* secondary copy: 6.4:1 on white */
  --fg-subtle: var(--gray-500);      /* meta, timestamps: 5.2:1 on white, 4.8:1 on canvas */
  --fg-inverse: var(--gray-0);
  --fg-accent: var(--blue-600);
  --fg-on-accent: var(--gray-0);

  /* ---- semantic: borders ----------------------------------------------------------- */
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-subtle: var(--gray-100);
  --border-accent: var(--blue-500);

  /* ---- semantic: status (reserved for state; never decoration, never doctors) ------ */
  --success-bg: var(--green-50);
  --success-border: var(--green-200);
  --success-fg: var(--green-700);
  --success-solid: var(--green-600);
  --warning-bg: var(--amber-50);
  --warning-border: var(--amber-200);
  --warning-fg: var(--amber-700);
  --warning-solid: var(--amber-500);
  --danger-bg: var(--red-50);
  --danger-border: var(--red-200);
  --danger-fg: var(--red-700);
  --danger-solid: var(--red-600);

  /* ---- type ------------------------------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 11px;    /* badges, counters */
  --text-xs: 12px;     /* meta, labels */
  --text-sm: 13px;     /* dense UI: lists, tables, buttons */
  --text-md: 14px;     /* body, chat */
  --text-lg: 16px;     /* panel titles */
  --text-xl: 20px;     /* section figures */
  --text-2xl: 28px;    /* page titles */
  --text-display: 44px; /* one hero number per screen */

  --leading-tight: 1.2;
  --leading-normal: 1.45;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.02em;  /* figures and titles ≥ 20px */
  --tracking-caps: 0.06em;    /* uppercase overlines */

  /* ---- space (4px grid) ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- radius ---------------------------------------------------------------------- */
  --radius-sm: 6px;    /* chips, small buttons, tags */
  --radius-md: 8px;    /* buttons, inputs, list cards */
  --radius-lg: 12px;   /* panels, dialogs */
  --radius-full: 999px;

  /* ---- elevation: borders do the work; shadows only for things that float ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 26, 24, .05);
  --shadow-pop: 0 16px 40px -16px rgba(26, 26, 24, .28), 0 2px 6px rgba(26, 26, 24, .06);
  --focus-ring: 0 0 0 3px rgba(47, 86, 217, .28);

  /* ---- motion ---------------------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- layout ---------------------------------------------------------------------- */
  --topbar-h: 56px;
  --tabbar-h: 60px;    /* phone bottom navigation */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}