/*
 * OKF Workspace design tokens.
 * Single source of truth: components reference var(--…) only — never hard-coded
 * hex/px. Obsidian / Linear / Raycast inspired DARK theme; the semantic token
 * names are unchanged from the original light contract, so the whole app reskins
 * by remapping values here (components were authored token-only).
 */

:root {
  color-scheme: dark;

  /* Spacing — 8-point scale (multiples of 4) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Layout fixed dimensions */
  --topbar-height: 56px;
  --navrail-width: 264px;
  --agentpanel-width: 360px;
  --login-card-width: 400px;

  /* Minimum interactive hit sizes (accessibility) */
  --hit-min-height: 40px;
  --hit-min-icon: 44px;

  /* Typography — exactly 4 sizes, exactly 2 weights */
  --font-family-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, ui-sans-serif, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;

  --font-size-display: 28px;
  --font-size-heading: 20px;
  --font-size-body: 16px;
  --font-size-label: 14px;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  --line-height-display: 1.2;
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
  --line-height-label: 1.4;

  /* ── Color — dark Obsidian palette ─────────────────────────────────────────
     Semantic names preserved; values remapped to the dark scheme. */
  --color-bg: #0b0d12;          /* main canvas */
  --color-text: #eef1f7;
  --color-surface: #11151f;     /* topbar / navrail / cards / raised fills */
  --color-border: rgba(255, 255, 255, 0.075);
  --color-text-muted: #8d96a8;
  --color-accent: #8b5cf6;
  --color-accent-fg: #ffffff;
  --color-destructive: #fb7185;
  --color-success: #22c55e;
  --color-warning: #facc15;

  /* Hover overlay — a translucent white wash reads on ANY dark surface, so the
     same token works for rows nested inside surfaces that share its color
     (the light theme darkened on hover; dark must lighten). */
  --color-hover: rgba(255, 255, 255, 0.06);

  /* Extended palette (Raycast/Linear polish) — used by topbar, tree, assistant. */
  --color-accent-2: #a78bfa;
  --color-accent-soft: rgba(139, 92, 246, 0.16);
  --color-accent-border: rgba(139, 92, 246, 0.38);
  --color-border-strong: rgba(255, 255, 255, 0.13);
  --color-surface-2: #1d2433;
  --color-text-2: #c7cedb;
  --color-faint: #626b7d;

  /* Graph canvas (Phase 10). Page nodes render as solid teal dots with a subtle
     outer glow ring; orphans use the same hue at low alpha + outline so they
     read as distinct without diverging from the palette. Tag nodes reuse
     --color-faint + diamond shape. Edges are type-colored: tag=green,
     backlink=blue, link=subtle border. */
  --graph-node-color: #4cc9a0;
  --graph-node-glow: rgba(76, 201, 160, 0.18);
  --graph-edge-tag: #22c55e;
  --graph-edge-backlink: #60a5fa;

  /* Page/tree/editor/prose surfaces */
  --tree-indent: 16px;
  /* Indent-guide hairline drawn one-per-ancestor-level in the file tree. */
  --color-tree-guide: rgba(255, 255, 255, 0.08);
  --prose-max-width: 720px;
  --editor-min-height: 480px;
  --color-code-bg: rgba(139, 92, 246, 0.12);
  --color-tree-hover: var(--color-hover);
  --color-tree-active-bg: rgba(139, 92, 246, 0.18);

  /* ── Syntax highlighting (ED-04a) ───────────────────────────────────────────
     Muted / Obsidian-like code palette, ~5 desaturated roles, legible on the
     #0b0d12 canvas. ONE shared HighlightStyle (lib/cm/highlight.ts) maps Lezer
     tags → `.tok-*` classes → these vars (tokens-only contract: no inline hex in
     theme.ts or the HighlightStyle). Authored for DARK only; the names/structure
     are theme-agnostic so a future light theme is a pure value swap here (D-01). */
  --syntax-keyword: #93b4f5;   /* soft blue   — keywords, operators, modifiers */
  --syntax-string: #8fd6a0;    /* soft green  — strings, chars, regexp */
  --syntax-comment: #6b7488;   /* muted grey  — comments (also italic) */
  --syntax-number: #e6c07b;    /* amber       — numbers, booleans, constants */
  --syntax-function: #b794f6;  /* soft purple — functions, types (harmonizes
                                  with --color-accent #8b5cf6) */

  /* Radius & elevation */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  /* Ambient accent glow bleeding from the top, over the base canvas. */
  background:
    radial-gradient(circle at 40% -10%, rgba(139, 92, 246, 0.16), transparent 32rem),
    radial-gradient(circle at 90% 4%, rgba(59, 130, 246, 0.09), transparent 26rem),
    var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(139, 92, 246, 0.35);
}

/* Slim, unobtrusive dark scrollbars (Raycast-style). */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.22);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.36);
  background-clip: content-box;
}

/* Shared focus-visible ring (accent, 2px, 2px offset) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
