/* DocsKit design tokens.
   --brand is injected per project from the database, e.g.
   <style>:root{--brand:#0f766e}</style> placed after this stylesheet. */

:root {
  --brand: #2f6feb;
  --brand-contrast: #ffffff;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --topbar-h: 56px;
  --tabs-h: 46px;
  --chrome-h: var(--topbar-h);
  --sidebar-w: 288px;
  --toc-w: 220px;
  --content-w: 720px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  color-scheme: light;
}

:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eceff3;
  --border: #e1e5ea;
  --border-strong: #c9cfd7;
  --text: #1b2128;
  --text-muted: #566170;
  --text-faint: #667282;

  --brand-text: color-mix(in srgb, var(--brand) 82%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 9%, var(--bg));
  --brand-soft-strong: color-mix(in srgb, var(--brand) 16%, var(--bg));
  --focus-ring: color-mix(in srgb, var(--brand) 55%, transparent);

  --code-bg: #f3f5f8;
  --code-text: #25303c;
  --code-inline-bg: #eef1f5;
  --pre-bg: #f6f8fa;
  --kbd-bg: #ffffff;
  --kbd-shadow: #c3c9d1;
  --mark-bg: #fff1a8;
  --mark-text: #3b3000;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow-md: 0 8px 24px rgb(16 24 40 / 0.12);
  --overlay: rgb(16 24 40 / 0.45);

  --note-bg: #eff6ff;   --note-border: #3b82f6;   --note-fg: #1e4fa8;
  --tip-bg: #ecfdf3;    --tip-border: #16a34a;    --tip-fg: #166534;
  --warning-bg: #fffbeb; --warning-border: #d97706; --warning-fg: #8a4b04;
  --danger-bg: #fef2f2; --danger-border: #dc2626; --danger-fg: #a11d1d;

  --added-bg: #e6f6ea;  --added-fg: #14532d;
  --removed-bg: #fdecec; --removed-fg: #7f1d1d;
}

:root[data-theme="dark"] {
  --bg: #0f1318;
  --surface: #161b22;
  --surface-2: #1f262f;
  --border: #29313b;
  --border-strong: #3a4552;
  --text: #e6eaf0;
  --text-muted: #a2adbb;
  --text-faint: #7f8b9a;

  --brand-text: color-mix(in srgb, var(--brand) 62%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand) 16%, var(--bg));
  --brand-soft-strong: color-mix(in srgb, var(--brand) 26%, var(--bg));
  --focus-ring: color-mix(in srgb, var(--brand) 65%, transparent);

  --code-bg: #1a2029;
  --code-text: #d7dee8;
  --code-inline-bg: #212a35;
  --pre-bg: #131920;
  --kbd-bg: #1f262f;
  --kbd-shadow: #0a0d11;
  --mark-bg: #5c4a00;
  --mark-text: #fff3b8;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.55);
  --overlay: rgb(0 0 0 / 0.6);

  --note-bg: #0f2038;   --note-border: #4a8cf0;   --note-fg: #a9c8f8;
  --tip-bg: #0e2a1b;    --tip-border: #34b36a;    --tip-fg: #a6e3c0;
  --warning-bg: #2d2108; --warning-border: #e0982b; --warning-fg: #f3d49b;
  --danger-bg: #301416; --danger-border: #ef5a5a; --danger-fg: #f6b4b4;

  --added-bg: #12301d;  --added-fg: #a6e3c0;
  --removed-bg: #36181a; --removed-fg: #f6b4b4;

  color-scheme: dark;
}