/* Capifold design tokens. Canonical source for both themes and every surface. */
:root {
  color-scheme: light;
  --color-bg: #f5f7fb;
  --color-bg-warm: #ebeff6;
  --color-bg-card: #ffffff;
  /* Illustration plate: artwork keeps its own light ground in both themes. */
  --color-plate: #e9eeff;
  --color-border-default: #dce2ec;
  --color-border-up: #b7c2d3;
  --color-text-default: #18263c;
  --color-text-soft: #4f5e75;
  --color-text-faint: #5d6c82;
  --color-accent: #304fdf;
  --color-accent-surface: #304fdf;
  --color-on-accent-surface: #ffffff;
  --color-accent-subtle: #e9eeff;
  --color-selection: #cfdaff;
  --color-green: #14724e;
  --color-orange: #8a5700;
  --color-danger: #b12e43;
  --color-dark-surface: #111d33;
  --color-brand-mark: #e2e9ff;
  --color-nav-bg: #15243d;
  --color-nav-text: #f5f7ff;
  --color-nav-muted: #aabad2;
  --color-nav-border: #33445f;
  --color-nav-active-bg: #e2e9ff;
  --color-nav-active-text: #233b9b;
  --color-protocol-mcp: #304fdf;
  --color-protocol-mcp-bg: #e9eeff;
  --color-protocol-a2a: #8052ab;
  --color-protocol-a2a-bg: #f1eaf8;
  --color-protocol-oasf: #79582e;
  --color-protocol-oasf-bg: #f4eee5;

  --font-sans: 'Figtree Variable', sans-serif;
  --font-mono: 'JetBrains Mono Variable', monospace;
  --text-hero-size: 3.5rem;
  --text-display-size: 2.5rem;
  --text-display-weight: 700;
  --text-display-leading: 1.12;
  --text-display-tracking: -0.035em;
  --text-page-title-size: 2rem;
  --text-page-title-weight: 650;
  --text-page-title-leading: 1.2;
  --text-page-title-tracking: -0.03em;
  --text-section-size: 1.625rem;
  --text-section-weight: 650;
  --text-section-leading: 1.25;
  --text-section-tracking: -0.025em;
  --text-h1-size: 1.375rem;
  --text-h1-weight: 650;
  --text-h1-tracking: -0.02em;
  --text-h2-size: 1.125rem;
  --text-h2-weight: 600;
  --text-h2-tracking: -0.015em;
  --text-body-lg-size: 1.0625rem;
  --text-body-size: 1rem;
  --text-body-sm-size: 0.9375rem;
  --text-body-weight: 400;
  --text-body-leading: 1.6;
  --text-label-size: 0.875rem;
  --text-label-weight: 600;
  --text-meta-size: 0.8125rem;
  --text-meta-weight: 500;
  --text-caption-size: 0.75rem;
  --text-caption-weight: 500;
  --text-code-size: 0.8125rem;
  --text-code-leading: 1.7;
  --text-card-title-size: 1.125rem;
  --text-card-title-weight: 650;
  --text-card-title-leading: 1.35;
  --text-metric-size: 1.625rem;
  --text-metric-weight: 600;
  --text-btn-size: 0.9375rem;
  --text-btn-weight: 600;
  --text-brand-size: 1.625rem;
  --text-brand-weight: 700;
  --tracking-label: 0.04em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --layout-sidebar: 14.5rem;
  --layout-content: 76rem;
  --layout-gutter: 2.5rem;
  --layout-prose: 72ch;
  --layout-search: 48rem;
  --layout-narrow: 28rem;
  --layout-sheet: 46rem;
  --layout-header-search: 24rem;
  --layout-hero-fold: 70rem;
  --size-control: 2.75rem;
  --size-input: 3rem;
  --size-icon: 1.25rem;
  --size-brand: 2.25rem;
  --nav-height: 4rem;
  --radius-tag: 0.25rem;
  --radius-input: 0.5rem;
  --radius-card: 0.75rem;
  --radius-pill: 9999px;
  --shadow-card: 0 16px 48px -16px rgba(17, 29, 51, 0.28);
  --shadow-raised: 0 1px 2px rgba(17, 29, 51, 0.06), 0 10px 28px -14px rgba(17, 29, 51, 0.22);
  --duration-sheet: 320ms;
  --stroke-default: 1px;
  --stroke-focus: 2px;
  --opacity-disabled: 0.48;
  --duration-feedback: 160ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #111a2a;
  --color-bg-warm: #202d43;
  --color-bg-card: #172338;
  --color-border-default: #303e55;
  --color-border-up: #4e6080;
  --color-text-default: #f0f4fc;
  --color-text-soft: #bbc8dc;
  --color-text-faint: #a3b3cc;
  --color-accent: #9caeff;
  --color-accent-surface: #b3c1ff;
  --color-on-accent-surface: #172657;
  --color-accent-subtle: #29395e;
  --color-selection: #3c5080;
  --color-green: #76d8af;
  --color-orange: #f1c475;
  --color-danger: #ff9cac;
  --color-brand-mark: #b3c1ff;
  --color-nav-bg: #0b1423;
  --color-nav-text: #f0f4fc;
  --color-nav-muted: #a3b3cc;
  --color-nav-border: #29384f;
  --color-nav-active-bg: #29395e;
  --color-nav-active-text: #c7d3ff;
  --color-protocol-mcp: #b3c1ff;
  --color-protocol-mcp-bg: #29395e;
  --color-protocol-a2a: #d9b9f4;
  --color-protocol-a2a-bg: #382f4e;
  --color-protocol-oasf: #e2c699;
  --color-protocol-oasf-bg: #3d352b;
  --shadow-card: 0 20px 56px -12px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.32), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
}