/* Lucian design tokens — bundled for static Cloudflare Pages deploy */
/*
 * Lucian design tokens — V2 visual system (Phase B1).
 *
 * Cursor-style visual language: flat neutral ramp, 1px hairline borders,
 * 4px spacing grid, 6-8px radii, mono for paths/metadata. No glassmorphism,
 * no gradient bubbles. Themes switch on html[data-theme]; dark is the
 * default and `:root` carries it so components never render untokenized.
 *
 * Legacy token names (--bg, --surface, --radius, ...) are preserved as the
 * semantic layer so the existing 4,700-line stylesheet keeps resolving;
 * values are re-derived from the new ramp.
 */

:root,
html[data-theme="dark"] {
  /* ── Neutral ramp (ChatGPT-style flat neutrals) ─────────────────────
     Main canvas #212121, sidebar/chrome #171717, raised surfaces
     (composer pill, menus) #2f2f2f. No blue cast. */
  --gray-950: #212121;
  --gray-900: #171717;
  --gray-850: #2f2f2f;
  --gray-800: #323232;
  --gray-750: #3d3d3d;
  --gray-700: #474747;
  --gray-600: #565656;
  --gray-500: #6e6e6e;
  --gray-400: #9b9b9b;
  --gray-300: #b4b4b4;
  --gray-200: #d1d1d1;
  --gray-100: #ececec;

  /* ── Hairline borders ───────────────────────────────────────────── */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.15);

  /* ── Accent (Lucian blue) ───────────────────────────────────────── */
  --accent: #5b9fd4;
  --accent-strong: #76b2e0;
  --accent-soft: rgba(91, 159, 212, 0.14);
  --accent-glow: rgba(91, 159, 212, 0.40);

  /* ── Status ─────────────────────────────────────────────────────── */
  --ok: #4cc38a;
  --ok-soft: rgba(76, 195, 138, 0.14);
  --warn: #e5b454;
  --warn-soft: rgba(229, 180, 84, 0.14);
  --danger: #e5534b;
  --danger-soft: rgba(229, 83, 75, 0.14);

  /* ── Semantic surfaces (legacy names, new values) ───────────────── */
  --bg: var(--gray-950);
  --bg-elevated: var(--gray-900);
  --surface: var(--gray-850);
  --surface-hover: var(--gray-800);
  --surface-active: var(--gray-750);
  --border: var(--hairline);
  --border-strong: var(--hairline-strong);
  --text: var(--gray-100);
  --text-secondary: var(--gray-300);
  --muted: var(--gray-400);

  /* Chat bubbles: flat surfaces, no gradients. Assistant turns are
     document-style (transparent), user turns are chips. */
  --user-bg: var(--gray-800);
  --assistant-bg: transparent;

  /* ── Radii (6-8px system) ───────────────────────────────────────── */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --radius-lg: 10px;
  --radius-md: var(--radius-sm);
  --radius-drawer: 0px;
  --shell-radius: 10px;

  /* ── 4px spacing 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;
  --space-12: 48px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font: "SF Pro Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-base: 14px;
  --font-size-sm: 12.5px;
  --font-size-xs: 11.5px;
  --line-height-base: 1.55;

  /* ── Elevation (flat, restrained) ───────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-drawer: var(--shadow-lg);
  --shadow-shell: var(--shadow-lg);
  --glass-read-shadow: none;

  /* ── Legacy aliases (kept so old selectors resolve) ─────────────── */
  --surface-a: var(--surface);
  --surface-b: var(--bg-elevated);
  --text-primary: var(--text);
}

/*
 * Light theme (Phase F2). Only the raw ramp, hairlines, accent, status and
 * elevation change; every semantic token re-resolves automatically because
 * custom properties are looked up at use time. The ramp is intentionally
 * "inverted by meaning": --gray-950 stays "app background", which is now the
 * lightest value. Code surfaces (Monaco, xterm, highlight.js) deliberately
 * stay dark.
 */
html[data-theme="light"] {
  /* ── Neutral ramp (ChatGPT-style light: white canvas, #f9f9f9 chrome) ── */
  --gray-950: #ffffff;
  --gray-900: #f9f9f9;
  --gray-850: #f4f4f4;
  --gray-800: #ececec;
  --gray-750: #e3e3e3;
  --gray-700: #d7d7d7;
  --gray-600: #c2c2c2;
  --gray-500: #9b9b9b;
  --gray-400: #757575;
  --gray-300: #5d5d5d;
  --gray-200: #3d3d3d;
  --gray-100: #0d0d0d;

  /* ── Hairline borders ───────────────────────────────────────────── */
  --hairline: rgba(16, 24, 40, 0.10);
  --hairline-strong: rgba(16, 24, 40, 0.18);

  /* ── Accent (Lucian blue, darkened for contrast on light) ──────── */
  --accent: #2f74ad;
  --accent-strong: #245e8f;
  --accent-soft: rgba(47, 116, 173, 0.12);
  --accent-glow: rgba(47, 116, 173, 0.28);

  /* ── Status ─────────────────────────────────────────────────────── */
  --ok: #1f9d63;
  --ok-soft: rgba(31, 157, 99, 0.12);
  --warn: #a87b16;
  --warn-soft: rgba(168, 123, 22, 0.12);
  --danger: #c93f37;
  --danger-soft: rgba(201, 63, 55, 0.10);

  /* ── Elevation (soft, light-appropriate) ────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.07);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.14);
}