body[data-theme="dark"] .design-reference-page {
    --dr-primary: var(--color-primary, #3a6fae);
    --dr-primary-dark: var(--color-primary-hover, #2f5f96);
    --dr-primary-strong: var(--color-primary-strong, #8ba9c9);
    --dr-primary-soft: var(--color-primary-soft, #1f2731);
    --dr-bg: var(--color-bg-page, #10100f);
    --dr-surface: var(--color-surface, #171717);
    --dr-surface-alt: var(--color-surface-alt, #1d1d1d);
    --dr-surface-soft: var(--color-surface-soft, #1a1a1a);
    --dr-surface-raised: var(--color-surface-raised, #202020);
    --dr-text: var(--color-text-primary, #edf0f3);
    --dr-muted: var(--color-text-muted, #c2c8d0);
    --dr-border: var(--color-border-default, #2a2a2a);
    --dr-border-soft: color-mix(in srgb, var(--dr-border) 76%, var(--dr-text) 24%);
    --dr-link: color-mix(in srgb, var(--dr-text) 84%, var(--dr-primary) 16%);
    --dr-link-hover: color-mix(in srgb, var(--dr-text) 90%, var(--dr-primary) 10%);
    --dr-info: var(--color-info, #89b6e8);
    --dr-success: var(--color-success, #8ec8a4);
    --dr-success-soft: var(--color-success-soft, #1d2b22);
    --dr-warning: var(--color-warning, #d6b26a);
    --dr-warning-soft: var(--color-warning-soft, #2f2a21);
    --dr-danger: var(--color-danger, #e39c9c);
    --dr-danger-soft: var(--color-danger-soft, #261a1a);
    --dr-focus-ring: var(--color-focus-ring, rgba(58, 111, 174, 0.4));
    --dr-on-primary: #eef4fb;
    --dr-code-bg: var(--color-code-bg, #111110);
    --dr-overlay: var(--color-overlay, rgba(0, 0, 0, 0.4));
    --dr-shadow: none;
    background: var(--dr-bg);
    color: var(--dr-text);
}

body[data-theme="dark"] .design-reference-page .dr-hero,
body[data-theme="dark"] .design-reference-page .dr-panel,
body[data-theme="dark"] .design-reference-page .dr-palette-group,
body[data-theme="dark"] .design-reference-page .dr-card,
body[data-theme="dark"] .design-reference-page .dr-pagination-card,
body[data-theme="dark"] .design-reference-page .dr-combo,
body[data-theme="dark"] .design-reference-page .dr-test-card,
body[data-theme="dark"] .design-reference-page .dr-snippet-card,
body[data-theme="dark"] .design-reference-page .dr-jelly-demo,
body[data-theme="dark"] .design-reference-page .dr-jelly-panel,
body[data-theme="dark"] .design-reference-page .dr-search-card,
body[data-theme="dark"] .design-reference-page .dr-chat-shell {
    background: var(--dr-surface);
    border-color: var(--dr-border);
    box-shadow: none;
}

body[data-theme="dark"] .design-reference-page .dr-panel-pagination,
body[data-theme="dark"] .design-reference-page .dr-panel-code,
body[data-theme="dark"] .design-reference-page .dr-panel-jelly,
body[data-theme="dark"] .design-reference-page .dr-panel-search,
body[data-theme="dark"] .design-reference-page .dr-panel-chat,
body[data-theme="dark"] .design-reference-page .dr-panel-comment,
body[data-theme="dark"] .design-reference-page .dr-panel-palette {
    background: color-mix(in srgb, var(--dr-bg) 85%, var(--dr-surface) 15%);
}

body[data-theme="dark"] .design-reference-page .dr-panel-head h2,
body[data-theme="dark"] .design-reference-page .dr-hero h1,
body[data-theme="dark"] .design-reference-page .dr-card h3,
body[data-theme="dark"] .design-reference-page .dr-pagination-card h3,
body[data-theme="dark"] .design-reference-page .dr-combo h3,
body[data-theme="dark"] .design-reference-page .dr-test-top h3,
body[data-theme="dark"] .design-reference-page .dr-snippet-head h3,
body[data-theme="dark"] .design-reference-page .dr-jelly-panel h3,
body[data-theme="dark"] .design-reference-page .dr-search-card h3,
body[data-theme="dark"] .design-reference-page .dr-chat-head strong {
    color: var(--dr-text);
}

body[data-theme="dark"] .design-reference-page .dr-hero p,
body[data-theme="dark"] .design-reference-page .dr-panel-head p,
body[data-theme="dark"] .design-reference-page .dr-card p,
body[data-theme="dark"] .design-reference-page .dr-list li,
body[data-theme="dark"] .design-reference-page .dr-combo p,
body[data-theme="dark"] .design-reference-page .dr-test-card p,
body[data-theme="dark"] .design-reference-page .dr-snippet-caption,
body[data-theme="dark"] .design-reference-page .dr-jelly-panel p,
body[data-theme="dark"] .design-reference-page .dr-mini-text,
body[data-theme="dark"] .design-reference-page .dr-msg span {
    color: var(--dr-muted);
}

body[data-theme="dark"] .design-reference-page .dr-breadcrumb,
body[data-theme="dark"] .design-reference-page .dr-breadcrumb span,
body[data-theme="dark"] .design-reference-page .dr-breadcrumb i {
    color: var(--dr-muted);
}

body[data-theme="dark"] .design-reference-page .dr-breadcrumb a,
body[data-theme="dark"] .design-reference-page .dr-card a,
body[data-theme="dark"] .design-reference-page .dr-chat-link,
body[data-theme="dark"] .design-reference-page .dr-apple-link,
body[data-theme="dark"] .design-reference-page .dr-theme-toggle {
    color: var(--dr-link);
}

body[data-theme="dark"] .design-reference-page .dr-apple-link,
body[data-theme="dark"] .design-reference-page .dr-chat-link,
body[data-theme="dark"] .design-reference-page .dr-theme-toggle {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
}

body[data-theme="dark"] .design-reference-page .dr-apple-link:hover,
body[data-theme="dark"] .design-reference-page .dr-chat-link:hover,
body[data-theme="dark"] .design-reference-page .dr-theme-toggle:hover {
    background: var(--dr-surface-raised);
    border-color: var(--dr-border-soft);
}

body[data-theme="dark"] .design-reference-page .dr-card-soft,
body[data-theme="dark"] .design-reference-page .dr-card-outline,
body[data-theme="dark"] .design-reference-page .dr-card-lift {
    background: var(--dr-surface);
    border-color: var(--dr-border);
}

body[data-theme="dark"] .design-reference-page .dr-card-solid {
    background: color-mix(in srgb, var(--dr-primary-dark) 64%, var(--dr-bg) 36%);
    border-color: color-mix(in srgb, var(--dr-primary-dark) 64%, var(--dr-bg) 36%);
}

body[data-theme="dark"] .design-reference-page .dr-chip,
body[data-theme="dark"] .design-reference-page .dr-badge,
body[data-theme="dark"] .design-reference-page .dr-page-indicator,
body[data-theme="dark"] .design-reference-page .dr-metrics div,
body[data-theme="dark"] .design-reference-page .dr-test-cta-bar,
body[data-theme="dark"] .design-reference-page .dr-snippet-lang {
    background: var(--dr-surface-alt);
    border-color: var(--dr-border);
    color: color-mix(in srgb, var(--dr-text) 74%, var(--dr-muted) 26%);
}

body[data-theme="dark"] .design-reference-page .dr-status {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

body[data-theme="dark"] .design-reference-page .dr-status-muted {
    background: var(--dr-surface-raised);
    color: color-mix(in srgb, var(--dr-text) 68%, var(--dr-muted) 32%);
}

body[data-theme="dark"] .design-reference-page .dr-btn-primary,
body[data-theme="dark"] .design-reference-page .dr-test-pill-btn,
body[data-theme="dark"] .design-reference-page .dr-chat-send {
    background: var(--dr-primary-dark);
    border-color: var(--dr-primary-dark);
    color: #ffffff;
}

body[data-theme="dark"] .design-reference-page .dr-btn-primary:hover,
body[data-theme="dark"] .design-reference-page .dr-test-pill-btn:hover,
body[data-theme="dark"] .design-reference-page .dr-chat-send:hover {
    background: color-mix(in srgb, var(--dr-primary-dark) 78%, var(--dr-bg) 22%);
    border-color: color-mix(in srgb, var(--dr-primary-dark) 78%, var(--dr-bg) 22%);
    color: #ffffff;
}

body[data-theme="dark"] .design-reference-page .dr-btn-secondary,
body[data-theme="dark"] .design-reference-page .dr-btn-ghost,
body[data-theme="dark"] .design-reference-page .dr-pill,
body[data-theme="dark"] .design-reference-page .dr-test-icon-btn,
body[data-theme="dark"] .design-reference-page .dr-snippet-copy,
body[data-theme="dark"] .design-reference-page .dr-page-btn,
body[data-theme="dark"] .design-reference-page .dr-page-nav,
body[data-theme="dark"] .design-reference-page .dr-jump-btn,
body[data-theme="dark"] .design-reference-page .dr-mini-btn,
body[data-theme="dark"] .design-reference-page .dr-chat-head button,
body[data-theme="dark"] .design-reference-page .dr-search-bar button {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
    color: color-mix(in srgb, var(--dr-text) 76%, var(--dr-muted) 24%);
}

body[data-theme="dark"] .design-reference-page .dr-btn-danger {
    background: var(--dr-danger-soft);
    border-color: color-mix(in srgb, var(--dr-danger) 45%, var(--dr-bg) 55%);
    color: color-mix(in srgb, var(--dr-danger) 88%, var(--dr-on-primary) 12%);
}

body[data-theme="dark"] .design-reference-page .dr-page-btn.is-active {
    background: var(--dr-primary-dark);
    border-color: var(--dr-primary-dark);
    color: var(--dr-on-primary);
}

body[data-theme="dark"] .design-reference-page .dr-search-bar,
body[data-theme="dark"] .design-reference-page .dr-chat-head,
body[data-theme="dark"] .design-reference-page .dr-chat-body,
body[data-theme="dark"] .design-reference-page .dr-chat-input,
body[data-theme="dark"] .design-reference-page .dr-chat-input-top,
body[data-theme="dark"] .design-reference-page .dr-comment-shell textarea,
body[data-theme="dark"] .design-reference-page .dr-jelly-tabs {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
}

body[data-theme="dark"] .design-reference-page .dr-search-bar i,
body[data-theme="dark"] .design-reference-page .dr-chat-plus,
body[data-theme="dark"] .design-reference-page .dr-chat-model {
    color: var(--dr-muted);
}

body[data-theme="dark"] .design-reference-page .dr-classic-search-input {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
    color: color-mix(in srgb, var(--dr-text) 88%, var(--dr-muted) 12%);
}

body[data-theme="dark"] .design-reference-page .dr-classic-search-icon {
    color: var(--dr-muted);
}

body[data-theme="dark"] .design-reference-page .dr-classic-search-btn {
    background: color-mix(in srgb, var(--dr-on-primary) 94%, var(--dr-text) 6%);
    color: #111;
}

body[data-theme="dark"] .design-reference-page .dr-search-bar input,
body[data-theme="dark"] .design-reference-page .dr-search-bar select,
body[data-theme="dark"] .design-reference-page .dr-chat-input-top input,
body[data-theme="dark"] .design-reference-page .dr-comment-shell textarea {
    color: color-mix(in srgb, var(--dr-text) 88%, var(--dr-muted) 12%);
}

body[data-theme="dark"] .design-reference-page .dr-comment-secret {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
    color: color-mix(in srgb, var(--dr-text) 76%, var(--dr-muted) 24%);
}

body[data-theme="dark"] .design-reference-page .dr-comment-submit {
    background: var(--dr-primary-dark);
    color: var(--dr-on-primary);
}

body[data-theme="dark"] .design-reference-page .dr-msg {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
    color: color-mix(in srgb, var(--dr-text) 88%, var(--dr-muted) 12%);
}

body[data-theme="dark"] .design-reference-page .dr-msg-ai {
    background: color-mix(in srgb, var(--dr-primary) 14%, var(--dr-bg) 86%);
    color: color-mix(in srgb, var(--dr-text) 86%, var(--dr-muted) 14%);
}

body[data-theme="dark"] .design-reference-page .dr-msg-user {
    background: var(--dr-primary-dark);
    border-color: var(--dr-primary-dark);
    color: var(--dr-on-primary);
}

body[data-theme="dark"] .design-reference-page .dr-jelly-tab {
    color: color-mix(in srgb, var(--dr-muted) 84%, var(--dr-text) 16%);
}

body[data-theme="dark"] .design-reference-page .dr-jelly-tab.is-active {
    color: color-mix(in srgb, var(--dr-on-primary) 80%, var(--dr-text) 20%);
}

body[data-theme="dark"] .design-reference-page .dr-jelly-indicator {
    background: var(--dr-border);
    box-shadow: none;
}

body[data-theme="dark"] .design-reference-page .dr-code-block {
    background: var(--dr-code-bg);
    border-color: var(--dr-border);
    color: color-mix(in srgb, var(--dr-text) 90%, var(--dr-muted) 10%);
}

body[data-theme="dark"] .design-reference-page .dr-test-actions {
    border-top-color: var(--dr-border);
}

body[data-theme="dark"] .design-reference-page .dr-palette-item {
    background: var(--dr-surface-soft);
    border-color: var(--dr-border);
}

body[data-theme="dark"] .design-reference-page .dr-palette-item span {
    color: color-mix(in srgb, var(--dr-text) 78%, var(--dr-muted) 22%);
}

body[data-theme="dark"] .design-reference-page .dr-palette-item code {
    color: color-mix(in srgb, var(--dr-muted) 88%, var(--dr-text) 12%);
}

body[data-theme="dark"] .design-reference-page .dr-token-usage-list {
    color: var(--dr-muted);
}

body[data-theme="dark"] .design-reference-page .dr-token-usage-list code {
    color: var(--dr-link);
}

body[data-theme="dark"] .design-reference-page .dr-swatch {
    border-color: var(--dr-border-soft);
}