/* ============================================================================
   serp — design tokens
   Distilled from zed.dev (see docs/design-dna-audit.md): near-monochrome,
   serif display + sans body, 1px hairlines over shadows, sharp 0–4px radii,
   restrained periwinkle accent used only on focus/select/dots.
   Single source of truth for all surfaces (site / console / admin).
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-serif-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Typography ─────────────────────────────── */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1: 30px;   --lh-h1: 38px;
  --fs-h2: 20px;   --lh-h2: 28px;
  --fs-h3: 14px;   --lh-h3: 22px;
  --fs-body: 14px; --lh-body: 22px;
  --fs-meta: 12px; --lh-meta: 18px;
  --fs-label: 11px;
  --fs-code: 12px; --lh-code: 19px;

  /* ── Color: light ───────────────────────────── */
  --text: #242529;             /* text.primary */
  --text-secondary: #58585a;   /* rgb(88,88,90) */
  --text-muted: #8a8a8d;

  --surface: #fafafa;          /* surface.base (warm near-white) */
  --surface-2: #f1f1f2;
  --surface-3: #ebebec;
  --surface-inset: #dcdcdd;    /* editor/inset */

  --border: #e6e6e7;           /* hairline */
  --border-strong: #d6d6d8;

  --brand: #7d82e8;            /* panel-focused_border (periwinkle) */
  --brand-strong: #8589e8;
  --brand-ink: #242529;
  --brand-grad: linear-gradient(135deg, #4361ff, #7c2ff5);
  --accent-2: #4e9a8f;         /* restrained secondary tone */
  --focus: #242529;

  /* semantic status (only where meaning is required) */
  --ok: #2f754b;
  --ok-bg: #eef5f0;
  --warn: #b3791f;
  --warn-bg: #f7f1e5;
  --danger: #c0504d;
  --danger-bg: #f7ecec;
  --info: #4b6bb5;
  --info-bg: #eef1f8;

  /* code token colors */
  --code-get: #22685d;
  --code-key: var(--text-secondary);
  --code-str: #22685d;
  --code-num: #8a4f2b;

  /* ── Shape ──────────────────────────────────── */
  --r-sharp: 4px;
  --r: 2px;
  --r-pill: 999px;

  /* ── Spacing scale (4px base) ───────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;

  /* ── Layout ─────────────────────────────────── */
  --wrap: 1360px;
  --nav-h: 60px;
  --sidebar-w: 232px;
  --topbar-h: 56px;

  /* ── Elevation: hairlines, not shadows ──────── */
  --ring-focus: 2px solid var(--focus);
  --shadow-overlay: 0 10px 30px rgba(20, 20, 24, 0.14);

  /* ── Motion ─────────────────────────────────── */
  --ease: 150ms ease;

  /* ── Z-index ────────────────────────────────── */
  --z-nav: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

[data-theme="dark"] {
  /* Inferred dark palette (source dark theme was a toggle, not captured). */
  --text: #f2f2f3;
  --text-secondary: #a6a6aa;
  --text-muted: #7c7c80;

  --surface: #1b1b1c;
  --surface-2: #242529;
  --surface-3: #2b2b2e;
  --surface-inset: #232325;

  --border: #333336;
  --border-strong: #3f3f44;

  --brand: #8b90f0;
  --brand-strong: #9aa0f4;
  --brand-ink: #1b1b1c;
  --accent-2: #5aa89c;
  --focus: #f2f2f3;

  --ok: #5fbf82;
  --ok-bg: #16241b;
  --warn: #d9a856;
  --warn-bg: #251f14;
  --danger: #e08b88;
  --danger-bg: #2a1a1a;
  --info: #8aa0dd;
  --info-bg: #1a1f2b;

  --code-str: #7cc0b3;
  --code-num: #d79a6a;

  --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.5);
}