/* InstituteOS Design System — standalone brand fonts + tokens + primitives.
 * Generated by scripts/export-css.mjs from @instituteos/design-system.
 * Framework-free: <link> this into any page (dashboard, website) to get the
 * full brand surface, including self-hosted Fraunces / Inter Tight / JetBrains
 * Mono (./fonts/). "Act. Infer. Serve." */

/* InstituteOS brand fonts — self-hosted OFL woff2 (latin subset). Generated by fetch_fonts. */

@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/InterTight-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/InterTight-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/InterTight-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/InterTight-700.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/JetBrainsMono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/JetBrainsMono-600.woff2') format('woff2'); }

/* AUTO-GENERATED from tokens/tokens.json by scripts/build-tokens.mjs — do not edit by hand. */
/* InstituteOS Design Tokens — "Act. Infer. Serve." */

:root {
  /* ── Brand: red is the sole highlight ── */
  --ds-red: #dc2626;
  --ds-red-light: #ef4444;
  --ds-red-dark: #b91c1c;
  --ds-on-accent: #ffffff;
  --ds-primary: var(--ds-red);
  --ds-primary-light: var(--ds-red-light);
  --ds-primary-dark: var(--ds-red-dark);
  /* mode accent defaults to brand red; mode classes override it */
  --ds-accent: var(--ds-red);

  /* ── Semantic ── */
  --ds-success: #22c55e;
  --ds-warning: #f59e0b;
  --ds-danger: #ef4444;
  --ds-info: #06b6d4;

  /* ── Theme surfaces (dark is the default) ── */
  --ds-bg: #0a0a0a;
  --ds-surface: #151515;
  --ds-surface-2: #2a2a2a;
  --ds-text: #e5e5e5;
  --ds-text-muted: #999999;
  --ds-text-dim: #808080;
  --ds-glass: rgba(21, 21, 21, 0.85);
  --ds-glass-border: rgba(255, 255, 255, 0.08);
  --ds-border: var(--ds-glass-border);
  --ds-shadow: 0 8px 32px rgba(0,0,0,0.5);
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --ds-shadow-lg: 0 2px 4px rgba(0,0,0,0.15), 0 12px 32px -8px rgba(0,0,0,0.55), 0 24px 48px -16px rgba(220,38,38,0.06);
  --ds-ring: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-primary);

  /* ── Typography ── */
  --ds-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --ds-font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.375rem;
  --ds-text-2xl: 1.75rem;
  --ds-text-3xl: 2.25rem;
  --ds-text-4xl: 3rem;
  --ds-weight-normal: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-leading-tight: 1.15;
  --ds-leading-snug: 1.35;
  --ds-leading-normal: 1.6;

  /* ── Spacing ── */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;
  --ds-space-8: 4rem;

  /* ── Radii ── */
  --ds-radius-sm: 10px;
  --ds-radius: 16px;
  --ds-radius-pill: 999px;

  /* ── Blur (glass / backdrop) ── */
  --ds-blur-glass: 12px;

  /* ── Motion ── */
  --ds-motion-fast: 120ms;
  --ds-motion: 200ms;
  --ds-motion-slow: 320ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --ds-sidebar-width: 260px;
  --ds-reader-width: 960px;

  /* ── Texture ── */
  --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");

  /* ── Mode accents ── */
  --ds-mode-governance: #dc2626;
  --ds-mode-officer: #6366f1;
  --ds-mode-projects: #10b981;
  --ds-mode-registry: #10b981;
  --ds-mode-intelligence: #8b5cf6;
  --ds-mode-cloud: #14b8a6;
  --ds-mode-repo: #f59e0b;
  --ds-mode-active-inference: #ec4899;
  --ds-mode-agent: #38bdf8;

  /* ── Board-status colors (8 states) ── */
  --ds-status-exploring: #808080;
  --ds-status-drafting: #6b7280;
  --ds-status-proposed: #06b6d4;
  --ds-status-for-vote: #6366f1;
  --ds-status-accepted: #22c55e;
  --ds-status-amended: #f59e0b;
  --ds-status-superseded: #8b5cf6;
  --ds-status-retired: #4b5563;

  /* ── Policy-category colors (9 categories) ── */
  --ds-category-governance-ethics: #dc2626;
  --ds-category-legal-risk-compliance: #6366f1;
  --ds-category-financial-investment: #22c55e;
  --ds-category-procurement-vendor: #f59e0b;
  --ds-category-human-resources: #ec4899;
  --ds-category-it-security: #06b6d4;
  --ds-category-operations: #8b5cf6;
  --ds-category-sales-marketing: #f97316;
  --ds-category-esg-values: #10b981;
}

html.theme-light, .ds-theme-light {
  --ds-bg: #f9fafb;
  --ds-surface: #ffffff;
  --ds-surface-2: #f3f4f6;
  --ds-text: #111827;
  --ds-text-muted: #4b5563;
  --ds-text-dim: #6b7280;
  --ds-glass: rgba(255, 255, 255, 0.85);
  --ds-glass-border: rgba(0, 0, 0, 0.08);
  --ds-shadow: 0 4px 16px rgba(0,0,0,0.1);
  --ds-shadow-lg: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.12), 0 24px 48px -16px rgba(220,38,38,0.08);
}

.ds-mode-governance { --ds-accent: var(--ds-mode-governance); }
.ds-mode-officer { --ds-accent: var(--ds-mode-officer); }
.ds-mode-projects { --ds-accent: var(--ds-mode-projects); }
.ds-mode-registry { --ds-accent: var(--ds-mode-registry); }
.ds-mode-intelligence { --ds-accent: var(--ds-mode-intelligence); }
.ds-mode-cloud { --ds-accent: var(--ds-mode-cloud); }
.ds-mode-repo { --ds-accent: var(--ds-mode-repo); }
.ds-mode-active-inference { --ds-accent: var(--ds-mode-active-inference); }
.ds-mode-agent { --ds-accent: var(--ds-mode-agent); }

/* ── Board-status badge accents (compose with .ds-badge.ds-badge--solid) ── */
.ds-badge.ds-status-exploring { --ds-badge-dot: var(--ds-status-exploring); }
.ds-badge.ds-status-drafting { --ds-badge-dot: var(--ds-status-drafting); }
.ds-badge.ds-status-proposed { --ds-badge-dot: var(--ds-status-proposed); }
.ds-badge.ds-status-for-vote { --ds-badge-dot: var(--ds-status-for-vote); }
.ds-badge.ds-status-accepted { --ds-badge-dot: var(--ds-status-accepted); }
.ds-badge.ds-status-amended { --ds-badge-dot: var(--ds-status-amended); }
.ds-badge.ds-status-superseded { --ds-badge-dot: var(--ds-status-superseded); }
.ds-badge.ds-status-retired { --ds-badge-dot: var(--ds-status-retired); }

/* ── Policy-category tag accents (compose with .ds-tag) ── */
.ds-tag.ds-category-governance-ethics { color: var(--ds-category-governance-ethics); border-color: var(--ds-category-governance-ethics); }
.ds-tag.ds-category-legal-risk-compliance { color: var(--ds-category-legal-risk-compliance); border-color: var(--ds-category-legal-risk-compliance); }
.ds-tag.ds-category-financial-investment { color: var(--ds-category-financial-investment); border-color: var(--ds-category-financial-investment); }
.ds-tag.ds-category-procurement-vendor { color: var(--ds-category-procurement-vendor); border-color: var(--ds-category-procurement-vendor); }
.ds-tag.ds-category-human-resources { color: var(--ds-category-human-resources); border-color: var(--ds-category-human-resources); }
.ds-tag.ds-category-it-security { color: var(--ds-category-it-security); border-color: var(--ds-category-it-security); }
.ds-tag.ds-category-operations { color: var(--ds-category-operations); border-color: var(--ds-category-operations); }
.ds-tag.ds-category-sales-marketing { color: var(--ds-category-sales-marketing); border-color: var(--ds-category-sales-marketing); }
.ds-tag.ds-category-esg-values { color: var(--ds-category-esg-values); border-color: var(--ds-category-esg-values); }

/* InstituteOS component primitives — plain CSS classes keyed to design tokens.
 * Every value resolves through a --ds-* custom property, so these classes
 * re-theme automatically under .ds-theme-light and re-tint under .ds-mode-*.
 * Consumable as-is by the website and dashboard; the React components emit
 * exactly these class names. */

/* ── Surface root ───────────────────────────────────────────── */
.ds-root {
  font-family: var(--ds-font-body);
  color: var(--ds-text);
  background: var(--ds-bg);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography ─────────────────────────────────────────────── */
.ds-display { font-family: var(--ds-font-display); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); letter-spacing: -0.02em; }
.ds-mono { font-family: var(--ds-font-mono); }
.ds-muted { color: var(--ds-text-muted); }
.ds-dim { color: var(--ds-text-dim); }

/* ── Button ─────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  font-family: var(--ds-font-body); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  line-height: 1; padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-sm); border: 1px solid transparent;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background var(--ds-motion) var(--ds-ease), border-color var(--ds-motion) var(--ds-ease),
              color var(--ds-motion) var(--ds-ease), transform var(--ds-motion-fast) var(--ds-ease);
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ds-btn--sm { font-size: var(--ds-text-xs); padding: var(--ds-space-2) var(--ds-space-3); }
.ds-btn--lg { font-size: var(--ds-text-base); padding: var(--ds-space-4) var(--ds-space-6); }
.ds-btn--primary { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-btn--primary:hover { background: var(--ds-primary-dark); }
.ds-btn--secondary { background: var(--ds-surface-2); color: var(--ds-text); border-color: var(--ds-border); }
.ds-btn--secondary:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-btn--ghost { background: transparent; color: var(--ds-text-muted); }
.ds-btn--ghost:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.ds-btn--danger { background: var(--ds-danger); color: var(--ds-on-accent); }
.ds-btn--danger:hover { filter: brightness(0.92); }

/* ── Card ───────────────────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-card--interactive { transition: border-color var(--ds-motion) var(--ds-ease), box-shadow var(--ds-motion) var(--ds-ease), transform var(--ds-motion) var(--ds-ease); cursor: pointer; }
.ds-card--interactive:hover { border-color: var(--ds-accent); box-shadow: var(--ds-shadow-lg); transform: translateY(-2px); }
.ds-card__header { padding: var(--ds-space-4) var(--ds-space-5); border-bottom: 1px solid var(--ds-border); font-family: var(--ds-font-display); font-weight: var(--ds-weight-semibold); }
.ds-card__body { padding: var(--ds-space-5); }
.ds-card__footer { padding: var(--ds-space-3) var(--ds-space-5); border-top: 1px solid var(--ds-border); color: var(--ds-text-dim); font-size: var(--ds-text-sm); }

/* ── Badge / StatusBadge ────────────────────────────────────── */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  padding: 0.2em 0.6em; border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border); background: var(--ds-surface-2); color: var(--ds-text);
  letter-spacing: 0.01em; white-space: nowrap;
}
.ds-badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--ds-badge-dot, var(--ds-text-dim)); }
.ds-badge--solid { background: var(--ds-badge-dot, var(--ds-accent)); color: var(--ds-on-accent); border-color: transparent; }
.ds-badge--solid::before { display: none; }

/* ── Tag ────────────────────────────────────────────────────── */
.ds-tag {
  display: inline-flex; align-items: center; font-size: var(--ds-text-xs);
  padding: 0.15em 0.55em; border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2); color: var(--ds-text-muted);
  border: 1px solid var(--ds-border); font-family: var(--ds-font-mono);
}

/* ── Pill / FilterPill ──────────────────────────────────────── */
.ds-pill {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-radius-pill);
  background: var(--ds-surface); color: var(--ds-text-muted);
  border: 1px solid var(--ds-border); cursor: pointer;
  transition: all var(--ds-motion) var(--ds-ease);
}
.ds-pill:hover { color: var(--ds-text); border-color: var(--ds-accent); }
.ds-pill--active { background: var(--ds-accent); color: var(--ds-on-accent); border-color: transparent; }

/* ── Stat / KPI ─────────────────────────────────────────────── */
.ds-stat { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: var(--ds-space-5); }
.ds-stat__value { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ds-text); }
.ds-stat__label { margin-top: var(--ds-space-2); font-size: var(--ds-text-sm); color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ds-stat__delta { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
.ds-stat__delta--up { color: var(--ds-success); }
.ds-stat__delta--down { color: var(--ds-danger); }

/* ── Callout / Banner ───────────────────────────────────────── */
.ds-callout {
  display: flex; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5);
  border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-callout-accent, var(--ds-accent));
  background: var(--ds-surface);
}
.ds-callout--info { --ds-callout-accent: var(--ds-info); }
.ds-callout--success { --ds-callout-accent: var(--ds-success); }
.ds-callout--warning { --ds-callout-accent: var(--ds-warning); }
.ds-callout--danger { --ds-callout-accent: var(--ds-danger); }
.ds-callout__title { font-weight: var(--ds-weight-semibold); margin-bottom: var(--ds-space-1); }

/* ── Table ──────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); }
.ds-table th { text-align: left; padding: var(--ds-space-3) var(--ds-space-4); color: var(--ds-text-dim); font-weight: var(--ds-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--ds-text-xs); border-bottom: 1px solid var(--ds-border); }
.ds-table td { padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border); }
.ds-table tbody tr { transition: background var(--ds-motion-fast) var(--ds-ease); }
.ds-table tbody tr:hover { background: var(--ds-surface-2); }

/* ── Glass panel ────────────────────────────────────────────── */
.ds-glass { background: var(--ds-glass); -webkit-backdrop-filter: blur(var(--ds-blur-glass)); backdrop-filter: blur(var(--ds-blur-glass)); border: 1px solid var(--ds-glass-border); border-radius: var(--ds-radius); }

/* ── Grain overlay (decorative, pointer-events none) ────────── */
.ds-grain::after { content: ""; position: absolute; inset: 0; background-image: var(--ds-grain); opacity: 0.02; pointer-events: none; mix-blend-mode: overlay; }

/* AUTO-GENERATED: concatenated + deduped component CSS from the expansion workflow. */

/* ── Field / Input ──────────────────────────────────────────── */
.ds-field {
  display: flex; flex-direction: column; gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
}

.ds-field__label {
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  color: var(--ds-text); line-height: var(--ds-leading-snug);
}

.ds-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--ds-font-body); font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-normal); line-height: var(--ds-leading-normal);
  color: var(--ds-text); background: var(--ds-surface);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  transition: border-color var(--ds-motion) var(--ds-ease),
              box-shadow var(--ds-motion) var(--ds-ease);
}

.ds-input::placeholder { color: var(--ds-text-dim); }

.ds-input:hover { border-color: var(--ds-text-dim); }

.ds-input:focus-visible { outline: none; border-color: var(--ds-accent); box-shadow: var(--ds-ring); }

.ds-input[disabled] { opacity: 0.5; cursor: not-allowed; }

.ds-field--sm .ds-input { font-size: var(--ds-text-xs); padding: var(--ds-space-2) var(--ds-space-3); }

.ds-field--lg .ds-input { font-size: var(--ds-text-base); padding: var(--ds-space-4) var(--ds-space-5); }

.ds-field__hint { font-size: var(--ds-text-xs); color: var(--ds-text-muted); line-height: var(--ds-leading-snug); }

.ds-field__error { font-size: var(--ds-text-xs); color: var(--ds-danger); line-height: var(--ds-leading-snug); }

.ds-field--error .ds-input { border-color: var(--ds-danger); }

.ds-field--error .ds-input:focus-visible { border-color: var(--ds-danger); box-shadow: var(--ds-ring); }

.ds-textarea {
  width: 100%;
  min-height: calc(var(--ds-space-8) + var(--ds-space-6));
  padding: var(--ds-space-3);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  resize: vertical;
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.ds-textarea::placeholder {
  color: var(--ds-text-muted);
}

.ds-textarea:focus-visible {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: var(--ds-ring);
}

.ds-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  resize: none;
}

.ds-field--error .ds-textarea {
  border-color: var(--ds-danger);
}

.ds-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  padding-right: var(--ds-space-7);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-normal);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
  background-color: var(--ds-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--ds-text-muted) 50%),
    linear-gradient(135deg, var(--ds-text-muted) 50%, transparent 50%);
  background-position: right var(--ds-space-3) center, right var(--ds-space-2) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.ds-select:hover {
  border-color: var(--ds-text-dim);
}

.ds-select:focus-visible {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: var(--ds-ring);
}

.ds-field--disabled .ds-field__label {
  color: var(--ds-text-dim);
}

.ds-select:disabled {
  color: var(--ds-text-dim);
  background-color: var(--ds-surface-2);
  cursor: not-allowed;
}

.ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
  cursor: pointer;
}

.ds-checkbox-box {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ds-space-4);
  height: var(--ds-space-4);
  margin: 0;
  flex: 0 0 auto;
  display: inline-grid;
  place-content: center;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition:
    background var(--ds-motion-fast) var(--ds-ease),
    border-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.ds-checkbox-box::before {
  content: "";
  width: 60%;
  height: 60%;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--ds-motion-fast) var(--ds-ease);
  background: var(--ds-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 80% 0, 40% 62%);
}

.ds-checkbox-box:checked {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
}

.ds-checkbox-box:checked::before {
  transform: scale(1);
}

.ds-checkbox-box:indeterminate {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
}

.ds-checkbox-box:indeterminate::before {
  width: 60%;
  height: 2px;
  transform: scale(1);
  clip-path: none;
}

.ds-checkbox-box:focus-visible {
  outline: none;
  box-shadow: var(--ds-ring);
}

.ds-checkbox-box:disabled {
  cursor: not-allowed;
  background: var(--ds-surface-2);
  border-color: var(--ds-border);
}

.ds-checkbox-box:disabled:checked {
  background: var(--ds-text-dim);
  border-color: var(--ds-text-dim);
}

.ds-checkbox:has(.ds-checkbox-box:disabled) {
  cursor: not-allowed;
  color: var(--ds-text-muted);
}

.ds-checkbox-label {
  user-select: none;
}

.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  cursor: pointer;
}

.ds-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ds-switch__track {
  position: relative;
  display: inline-block;
  width: var(--ds-space-7);
  height: var(--ds-space-5);
  flex: 0 0 auto;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  transition: background var(--ds-motion-fast) var(--ds-ease),
    border-color var(--ds-motion-fast) var(--ds-ease);
}

.ds-switch__thumb {
  position: absolute;
  top: 50%;
  left: var(--ds-space-1);
  width: var(--ds-space-3);
  height: var(--ds-space-3);
  border-radius: 50%;
  background: var(--ds-on-accent);
  box-shadow: var(--ds-shadow-sm);
  transform: translateY(-50%);
  transition: transform var(--ds-motion-fast) var(--ds-ease);
}

.ds-switch[aria-checked="true"] .ds-switch__track {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
}

.ds-switch[aria-checked="true"] .ds-switch__thumb {
  transform: translate(var(--ds-space-3), -50%);
}

.ds-switch:focus-visible {
  outline: none;
}

.ds-switch:focus-visible .ds-switch__track {
  box-shadow: var(--ds-ring);
}

.ds-switch__label {
  user-select: none;
}

.ds-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
  cursor: pointer;
}

.ds-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-radio__dot {
  position: relative;
  flex: 0 0 auto;
  width: var(--ds-space-4);
  height: var(--ds-space-4);
  border: 2px solid var(--ds-border);
  border-radius: 50%;
  background: var(--ds-surface);
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.ds-radio__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: var(--ds-accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--ds-motion-fast) var(--ds-ease);
}

.ds-radio--checked .ds-radio__dot {
  border-color: var(--ds-accent);
}

.ds-radio--checked .ds-radio__dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.ds-radio input:focus-visible + .ds-radio__dot {
  box-shadow: var(--ds-ring);
}

.ds-radio__label {
  color: var(--ds-text);
}

.ds-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.ds-tabs__list {
  display: flex;
  gap: var(--ds-space-1);
  border-bottom: 1px solid var(--ds-border);
}

.ds-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--ds-space-2) var(--ds-space-3);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: color var(--ds-motion-fast) var(--ds-ease),
    border-color var(--ds-motion-fast) var(--ds-ease);
}

.ds-tab:hover {
  color: var(--ds-text);
}

.ds-tab:focus-visible {
  outline: none;
  box-shadow: var(--ds-ring);
  border-radius: var(--ds-radius-sm);
}

.ds-tab--active {
  color: var(--ds-text);
  border-bottom-color: var(--ds-accent);
}

.ds-tabs__panel {
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
}

.ds-tooltip {
  position: relative;
  display: inline-flex;
}

.ds-tooltip__bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, calc(-1 * var(--ds-space-1)));
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  padding: var(--ds-space-1) var(--ds-space-2);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-snug);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-motion-fast) var(--ds-ease), visibility var(--ds-motion-fast) var(--ds-ease);
}

.ds-tooltip--bottom .ds-tooltip__bubble {
  bottom: auto;
  top: 100%;
  transform: translate(-50%, var(--ds-space-1));
}

.ds-tooltip:hover .ds-tooltip__bubble,
.ds-tooltip:focus-within .ds-tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ds-space-6);
  height: var(--ds-space-6);
  border-radius: 50%;
  overflow: hidden;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-tight);
  text-transform: uppercase;
  user-select: none;
}

.ds-avatar--sm {
  width: var(--ds-space-5);
  height: var(--ds-space-5);
  font-size: var(--ds-text-xs);
}

.ds-avatar--lg {
  width: var(--ds-space-8);
  height: var(--ds-space-8);
  font-size: var(--ds-text-lg);
}

.ds-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
}

.ds-breadcrumb__item {
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: color var(--ds-motion-fast) var(--ds-ease);
}

a.ds-breadcrumb__item:hover {
  color: var(--ds-accent);
}

a.ds-breadcrumb__item:focus-visible {
  outline: var(--ds-ring);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

.ds-breadcrumb__item[aria-current="page"] {
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
}

.ds-breadcrumb__sep {
  color: var(--ds-text-dim);
  user-select: none;
}

.ds-progress {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  font-family: var(--ds-font-body);
}

.ds-progress__label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text-muted);
}

.ds-progress__track {
  display: block;
  width: 100%;
  height: var(--ds-space-2);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  overflow: hidden;
}

.ds-progress__bar {
  display: block;
  height: 100%;
  background: var(--ds-accent);
  border-radius: var(--ds-radius-pill);
  transition: width var(--ds-motion) var(--ds-ease);
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

.ds-spinner {
  display: inline-block;
  width: var(--ds-text-xl);
  height: var(--ds-text-xl);
  border: 2px solid var(--ds-border);
  border-top-color: var(--ds-accent);
  border-radius: 50%;
  animation: ds-spin var(--ds-motion-slow) linear infinite;
}

.ds-spinner--sm {
  width: var(--ds-text-base);
  height: var(--ds-text-base);
  border-width: 2px;
}

.ds-spinner--lg {
  width: var(--ds-text-3xl);
  height: var(--ds-text-3xl);
  border-width: 3px;
}

.ds-skeleton {
  display: block;
  width: 100%;
  height: var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-surface-2);
  background-image: linear-gradient(
    90deg,
    var(--ds-surface-2) 0,
    var(--ds-surface) 50%,
    var(--ds-surface-2) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ds-shimmer var(--ds-motion-slow) var(--ds-ease) infinite;
}

@keyframes ds-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ds-divider {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
}

.ds-divider::before,
.ds-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--ds-border);
}

.ds-divider__label {
  flex: 0 0 auto;
  padding: 0 var(--ds-space-3);
  color: var(--ds-text-muted);
}

.ds-divider--vertical {
  display: inline-flex;
  flex-direction: column;
  width: 1px;
  height: 100%;
  align-self: stretch;
}

.ds-divider--vertical::before,
.ds-divider--vertical::after {
  content: "";
  flex: 1 1 0;
  width: 1px;
  height: auto;
  background: var(--ds-border);
}

.ds-heading {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.02em;
  color: var(--ds-text);
}

.ds-heading--1 {
  font-size: var(--ds-text-4xl);
  letter-spacing: -0.03em;
}

.ds-heading--2 {
  font-size: var(--ds-text-3xl);
  letter-spacing: -0.025em;
}

.ds-heading--3 {
  font-size: var(--ds-text-2xl);
}

.ds-heading--4 {
  font-size: var(--ds-text-xl);
  letter-spacing: -0.01em;
}

.ds-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  box-shadow: var(--ds-shadow-sm);
  font-family: var(--ds-font-body);
}

.ds-mode-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-tight);
  cursor: pointer;
  transition: color var(--ds-motion-fast) var(--ds-ease),
    background-color var(--ds-motion-fast) var(--ds-ease),
    border-color var(--ds-motion-fast) var(--ds-ease);
}

.ds-mode-switch:hover {
  color: var(--ds-text);
  background: var(--ds-surface-2);
}

.ds-mode-switch:focus-visible {
  outline: none;
  box-shadow: var(--ds-ring);
}

.ds-mode-switch--active {
  color: var(--ds-on-accent);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-sm);
}

.ds-mode-switch--active:hover {
  color: var(--ds-on-accent);
}