/* ==========================================
   DIALECT OVERRIDES (per theme)
   Contract used by components:
     --ctl-radius, --ctl-border-weight, --ctl-elev, --ctl-elev-hover, --ctl-backdrop, --ctl-hover-lift
     --btn-*-bg/fg/border/shadow/letter/text-shadow
   ========================================== */

/* ===== Glassmorphism ===== */
html[data-theme="glass"] {
  --ctl-radius: var(--crusher-radius-lg);
  --ctl-border-weight: 1px;
  --ctl-elev: var(--crusher-shadow-2);
  --ctl-elev-hover: 0 12px 36px rgba(0,0,0,0.18);
  --ctl-backdrop: blur(var(--crusher-effect-blur-md));

  /* Buttons */
  --btn-outline-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 12%);
  --btn-subtle-border: var(--btn-outline-border);
  --btn-border: var(--btn-outline-border);

  --btn-primary-shadow: 0 6px 18px color-mix(in srgb, var(--btn-primary-bg) 35%, transparent);
  --btn-secondary-shadow: 0 6px 18px color-mix(in srgb, var(--btn-secondary-bg) 35%, transparent);
  --btn-secondary-bg: color-mix(in srgb, var(--crusher-color-brand-secondary) 82%, var(--crusher-color-base-white) 18%);
  --btn-secondary-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 34%, var(--crusher-border-primary));

  --crusher-card-bg: color-mix(in srgb, var(--crusher-background-surface), transparent 0%);
  --crusher-card-border: var(--crusher-border-primary);
  --crusher-card-shadow: var(--crusher-shadow-2);
  --crusher-card-backdrop: blur(var(--crusher-effect-blur-md));
  --crusher-toolbar-bg: color-mix(in srgb, var(--crusher-background-surface) 82%, transparent);
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 16%);
  --crusher-toolbar-shadow: 0 10px 28px color-mix(in srgb, black 12%, transparent);
  --crusher-filter-bar-bg: color-mix(in srgb, var(--crusher-background-surface) 86%, transparent);
  --crusher-filter-bar-border: var(--crusher-toolbar-border);
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-background-surface) 78%, transparent);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 12%);
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-border-primary) 68%, transparent);
  --crusher-nav-panel-bg: color-mix(in srgb, var(--crusher-background-surface) 88%, transparent);
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 14%);
  --crusher-nav-panel-shadow: 0 8px 22px color-mix(in srgb, black 8%, transparent);
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-base-white) 70%, transparent);
}
html[data-theme="glass"][data-mode="dark"] {
  --btn-outline-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 24%);
  --btn-subtle-bg: color-mix(in srgb, var(--crusher-background-surface) 92%, transparent);
  --crusher-card-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 18%);
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 24%);
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-background-surface) 84%, transparent);
}

/* ===== Futuristic / Neon ===== */
html[data-theme="futuristic"] {
  --ctl-radius: 999px;
  --ctl-border-weight: 1px;
  --ctl-elev: 0 0 0 1px color-mix(in srgb, var(--crusher-color-brand-primary) 35%, var(--crusher-border-primary));
  --ctl-elev-hover: 0 0 12px color-mix(in srgb, var(--crusher-color-brand-primary) 35%, transparent);
  --ctl-backdrop: blur(calc(var(--crusher-effect-blur-md) / 2));
  --ctl-hover-lift: translateY(-1px);

  /* Button typography flavor */
  --btn-primary-letter: 0.02em;
  --btn-secondary-letter: 0.02em;
  --btn-danger-letter: 0.02em;

  /* Neon-ish edges */
  --btn-primary-border: color-mix(in srgb, var(--crusher-color-brand-primary) 40%, var(--crusher-border-primary));
  --btn-secondary-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 40%, var(--crusher-border-primary));
  --btn-danger-border: color-mix(in srgb, var(--crusher-color-brand-accent-red) 40%, var(--crusher-border-primary));

  --btn-primary-text-shadow: 0 0 8px color-mix(in srgb, currentColor 50%, transparent);
  --btn-secondary-text-shadow: 0 0 8px color-mix(in srgb, currentColor 50%, transparent);
  --btn-danger-text-shadow: 0 0 8px color-mix(in srgb, currentColor 50%, transparent);
  --btn-secondary-bg: color-mix(in srgb, var(--crusher-color-brand-secondary) 76%, var(--crusher-color-brand-primary) 24%);
  --btn-secondary-shadow: 0 0 18px color-mix(in srgb, var(--crusher-color-brand-secondary) 24%, transparent);

  --crusher-card-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-background-surface), transparent 20%), transparent 40%),
    color-mix(in srgb, var(--crusher-color-dark-background-canvas) 35%, transparent);
  --crusher-card-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 40%, var(--crusher-border-primary));
  --crusher-card-shadow:
    0 0 0 var(--crusher-component-border-weight) color-mix(in srgb, var(--crusher-color-brand-primary) 30%, transparent),
    var(--crusher-shadow-2);
  --crusher-card-backdrop: blur(calc(var(--crusher-effect-blur-md) / 2));
  --crusher-toolbar-bg: color-mix(in srgb, var(--crusher-background-surface) 80%, transparent);
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-color-brand-primary) 34%, var(--crusher-border-primary));
  --crusher-toolbar-shadow:
    0 0 0 1px color-mix(in srgb, var(--crusher-color-brand-primary) 18%, transparent),
    0 0 24px color-mix(in srgb, var(--crusher-color-brand-primary) 16%, transparent);
  --crusher-filter-bar-bg: color-mix(in srgb, var(--crusher-background-surface) 84%, transparent);
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 28%, var(--crusher-border-primary));
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-background-canvas) 72%, var(--crusher-color-brand-primary) 8%);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-color-brand-primary) 26%, var(--crusher-border-primary));
  --crusher-nav-panel-bg: color-mix(in srgb, var(--crusher-background-surface) 86%, transparent);
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-color-brand-primary) 28%, var(--crusher-border-primary));
  --crusher-nav-panel-shadow: 0 0 0 1px color-mix(in srgb, var(--crusher-color-brand-primary) 16%, transparent), 0 0 24px color-mix(in srgb, var(--crusher-color-brand-primary) 12%, transparent);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-primary) 20%, transparent);
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-color-brand-primary) 54%, var(--crusher-border-primary));
  --crusher-nav-item-shadow-active: 0 0 20px color-mix(in srgb, var(--crusher-color-brand-primary) 12%, transparent);
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-brand-primary) 16%, transparent);
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-color-brand-primary) 22%, var(--crusher-border-primary));
}
html[data-theme="futuristic"][data-mode="light"] {
  --btn-outline-bg: color-mix(in srgb, var(--crusher-color-base-white) 72%, transparent);
  --btn-subtle-bg: color-mix(in srgb, var(--crusher-color-base-white) 68%, var(--crusher-color-brand-primary) 6%);
  --crusher-card-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-color-base-white) 82%, var(--crusher-color-brand-primary) 8%), transparent 42%),
    color-mix(in srgb, var(--crusher-background-surface) 88%, transparent);
  --crusher-card-border: color-mix(in srgb, var(--crusher-color-brand-primary) 32%, var(--crusher-border-primary));
}

/* ===== Minimal ===== */
html[data-theme="minimal"] {
  --ctl-radius: var(--crusher-radius-md);
  --ctl-border-weight: 1px;
  --ctl-elev: 0 12px 28px rgba(15, 23, 42, 0.04);
  --ctl-elev-hover: 0 18px 36px rgba(15, 23, 42, 0.08);
  --ctl-backdrop: none;
  --ctl-hover-lift: translateY(-1px);

  --btn-outline-bg: color-mix(in srgb, var(--crusher-color-base-white) 76%, transparent);
  --btn-outline-border: color-mix(in srgb, var(--crusher-text-primary) 12%, transparent);
  --btn-ghost-bg: color-mix(in srgb, var(--crusher-text-primary) 6%, transparent);
  --btn-subtle-bg: color-mix(in srgb, var(--crusher-color-base-white) 92%, var(--crusher-text-primary) 8%);
  --btn-subtle-border: color-mix(in srgb, var(--crusher-text-primary) 10%, transparent);
  --btn-subtle-shadow: none;
  --btn-secondary-bg: color-mix(in srgb, var(--crusher-text-primary) 86%, var(--crusher-background-surface));
  --btn-secondary-fg: var(--crusher-color-base-white);
  --btn-secondary-border: color-mix(in srgb, var(--crusher-text-primary) 16%, transparent);
  --btn-secondary-shadow: none;

  --crusher-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--crusher-color-base-white) 98%, var(--crusher-color-brand-primary) 2%), color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-text-primary) 4%));
  --crusher-card-border: color-mix(in srgb, var(--crusher-text-primary) 14%, transparent);
  --crusher-card-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  --crusher-card-hover-shadow: 0 22px 38px rgba(15, 23, 42, 0.12);
  --crusher-card-backdrop: none;
  --crusher-toolbar-bg: color-mix(in srgb, var(--crusher-color-base-white) 92%, var(--crusher-color-brand-primary) 8%);
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-text-primary) 10%, transparent);
  --crusher-toolbar-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
  --crusher-filter-bar-bg: color-mix(in srgb, var(--crusher-color-base-white) 94%, var(--crusher-color-brand-primary) 6%);
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-text-primary) 10%, transparent);
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-color-base-white) 98%, transparent);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-text-primary) 11%, transparent);
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-text-primary) 12%, transparent);
  --crusher-nav-panel-bg: color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-primary) 4%);
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-text-primary) 12%, transparent);
  --crusher-nav-panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.045);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-text-primary) 7%, var(--crusher-color-base-white));
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-text-primary) 14%, transparent);
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-text-primary) 6%, transparent);
  --code-bg: color-mix(in srgb, var(--crusher-text-primary) 3%, var(--crusher-color-base-white));
  --code-border: color-mix(in srgb, var(--crusher-text-primary) 10%, transparent);
  --code-pill-bg: color-mix(in srgb, var(--crusher-color-base-white) 92%, var(--crusher-text-primary) 8%);
}
html[data-theme="minimal"][data-mode="dark"] {
  --btn-subtle-bg: color-mix(in srgb, var(--crusher-background-surface) 94%, transparent);
  --btn-outline-bg: color-mix(in srgb, var(--crusher-background-surface) 88%, transparent);
  --crusher-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-base-white) 5%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --crusher-card-border: color-mix(in srgb, var(--crusher-color-base-white) 10%, transparent);
  --crusher-card-shadow: 0 18px 34px color-mix(in srgb, black 26%, transparent);
  --crusher-card-hover-shadow: 0 24px 44px color-mix(in srgb, black 34%, transparent);
  --crusher-toolbar-bg: color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%);
  --crusher-filter-bar-bg: color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-base-white) 5%);
  --crusher-nav-panel-bg: color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%);
  --code-bg: color-mix(in srgb, var(--crusher-color-base-white) 4%, var(--crusher-background-canvas));
  --code-border: color-mix(in srgb, var(--crusher-color-base-white) 12%, transparent);
  --code-pill-bg: color-mix(in srgb, var(--crusher-color-base-white) 6%, transparent);
}

/* ===== Brutal ===== */
html[data-theme="brutal"] {
  --ctl-radius: var(--crusher-radius-sm);
  --ctl-border-weight: 2px;
  --ctl-elev: 6px 6px 0 0 rgba(0,0,0,0.9);
  --ctl-elev-hover: 8px 8px 0 0 rgba(0,0,0,0.9);
  --ctl-backdrop: none;
  --ctl-hover-lift: translateY(-1px);

  --btn-outline-border: color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --btn-ghost-bg: transparent;
  --btn-primary-letter: 0.01em; /* subtle punch */
  --btn-secondary-bg: var(--crusher-color-brand-secondary);
  --btn-secondary-fg: var(--crusher-text-primary);
  --btn-secondary-border: color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --btn-secondary-shadow: 6px 6px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-card-bg: var(--crusher-background-surface);
  --crusher-card-border: color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-card-shadow: 8px 8px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-card-backdrop: none;
  --crusher-card-hover-shadow: 10px 10px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-toolbar-bg: var(--crusher-background-surface);
  --crusher-toolbar-border: var(--crusher-card-border);
  --crusher-toolbar-shadow: 6px 6px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-filter-bar-bg: var(--crusher-background-surface);
  --crusher-filter-bar-border: var(--crusher-card-border);
  --crusher-filter-search-bg: var(--crusher-background-canvas);
  --crusher-filter-search-border: var(--crusher-card-border);
  --crusher-nav-panel-bg: var(--crusher-background-surface);
  --crusher-nav-panel-border: var(--crusher-card-border);
  --crusher-nav-panel-shadow: 6px 6px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-secondary) 24%, var(--crusher-background-surface));
  --crusher-nav-item-border-active: var(--crusher-card-border);
  --crusher-nav-item-shadow-hover: 4px 4px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-nav-item-shadow-active: 4px 4px 0 0 color-mix(in srgb, var(--crusher-text-primary) 92%, transparent);
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-brand-secondary) 18%, transparent);
  --crusher-nav-badge-bg: color-mix(in srgb, var(--crusher-color-brand-secondary) 28%, transparent);
  --crusher-nav-badge-fg: var(--crusher-text-primary);
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-text-primary) 65%, transparent);
}
html[data-theme="brutal"][data-mode="dark"] {
  --btn-outline-border: color-mix(in srgb, var(--crusher-color-base-white) 96%, transparent);
  --crusher-card-border: color-mix(in srgb, var(--crusher-color-base-white) 96%, transparent);
  --crusher-card-shadow: 8px 8px 0 0 color-mix(in srgb, black 70%, transparent);
  --crusher-card-hover-shadow: 10px 10px 0 0 color-mix(in srgb, black 72%, transparent);
  --crusher-toolbar-shadow: 6px 6px 0 0 color-mix(in srgb, black 76%, transparent);
}

/* ===== NeoBrutal ===== */
html[data-theme="neobrutal"] {
  --ctl-radius: var(--crusher-radius-md);
  --ctl-border-weight: 2px;
  --ctl-elev: 0 0 0 3px currentColor, 6px 6px 0 0 rgba(0,0,0,0.85);
  --ctl-elev-hover: 0 0 0 3px currentColor, 8px 8px 0 0 rgba(0,0,0,0.85);
  --ctl-backdrop: none;

  --btn-primary-border: currentColor;
  --btn-secondary-border: currentColor;
  --btn-danger-border: currentColor;
  --btn-secondary-bg: color-mix(in srgb, var(--crusher-color-brand-secondary) 82%, var(--crusher-color-base-white) 18%);
  --btn-secondary-fg: var(--crusher-text-primary);
  --btn-secondary-shadow: 0 0 0 3px color-mix(in srgb, currentColor 82%, transparent), 6px 6px 0 0 rgba(0,0,0,0.82);
  --crusher-card-bg: color-mix(in srgb, var(--crusher-background-surface) 94%, var(--crusher-color-base-white) 6%);
  --crusher-card-border: color-mix(in srgb, currentColor 86%, transparent);
  --crusher-card-shadow: 0 0 0 3px color-mix(in srgb, currentColor 88%, transparent), 8px 8px 0 0 rgba(0,0,0,0.82);
  --crusher-card-backdrop: none;
  --crusher-card-hover-shadow: 0 0 0 3px color-mix(in srgb, currentColor 88%, transparent), 10px 10px 0 0 rgba(0,0,0,0.86);
  --crusher-toolbar-bg: color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%);
  --crusher-toolbar-border: color-mix(in srgb, currentColor 82%, transparent);
  --crusher-toolbar-shadow: 0 0 0 3px color-mix(in srgb, currentColor 84%, transparent), 6px 6px 0 0 rgba(0,0,0,0.82);
  --crusher-filter-bar-bg: color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%);
  --crusher-filter-bar-border: color-mix(in srgb, currentColor 82%, transparent);
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-background-canvas) 92%, transparent);
  --crusher-filter-search-border: color-mix(in srgb, currentColor 78%, transparent);
  --crusher-nav-panel-bg: color-mix(in srgb, var(--crusher-background-surface) 97%, var(--crusher-color-base-white) 3%);
  --crusher-nav-panel-border: color-mix(in srgb, currentColor 82%, transparent);
  --crusher-nav-panel-shadow: 0 0 0 3px color-mix(in srgb, currentColor 84%, transparent), 6px 6px 0 0 rgba(0,0,0,0.82);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-secondary) 18%, transparent);
  --crusher-nav-item-border-active: color-mix(in srgb, currentColor 76%, transparent);
  --crusher-nav-item-shadow-hover: 4px 4px 0 0 rgba(0,0,0,0.78);
  --crusher-nav-item-shadow-active: 4px 4px 0 0 rgba(0,0,0,0.82);
  --crusher-nav-item-icon-bg: color-mix(in srgb, currentColor 10%, transparent);
  --crusher-page-header-divider: color-mix(in srgb, currentColor 28%, transparent);
}

/* ===== Neumorphism ===== */
html[data-theme="neumorph"] {
  --ctl-radius: var(--crusher-radius-lg);
  --ctl-border-weight: 0px;
  --ctl-elev: 14px 14px 30px rgba(148,163,184,0.18), -12px -12px 26px rgba(255,255,255,0.9);
  --ctl-elev-hover: 16px 16px 32px rgba(148,163,184,0.22), -14px -14px 28px rgba(255,255,255,0.94);
  --ctl-backdrop: none;
  --crusher-surface: color-mix(in srgb, var(--crusher-color-base-white) 97%, var(--crusher-color-brand-primary) 3%);
  --crusher-border: color-mix(in srgb, var(--crusher-border-primary) 62%, transparent);
  --crusher-fg-muted: color-mix(in srgb, var(--crusher-text-secondary) 88%, var(--crusher-text-primary) 12%);
  --btn-outline-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-primary) 4%), color-mix(in srgb, var(--crusher-background-surface) 98%, black 2%));
  --btn-outline-border: color-mix(in srgb, var(--crusher-border-primary) 50%, transparent);
  --btn-subtle-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 97%, var(--crusher-color-brand-primary) 3%), color-mix(in srgb, var(--crusher-background-surface) 96%, black 4%));
  --btn-subtle-border: color-mix(in srgb, var(--crusher-border-primary) 44%, transparent);
  --btn-secondary-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-brand-secondary) 78%, var(--crusher-color-base-white) 22%), color-mix(in srgb, var(--crusher-color-brand-secondary) 64%, var(--crusher-background-surface) 36%));
  --btn-secondary-border: transparent;
  --btn-secondary-shadow: 8px 8px 18px color-mix(in srgb, var(--crusher-color-brand-secondary) 12%, transparent), -8px -8px 18px color-mix(in srgb, var(--crusher-color-base-white) 55%, transparent);
  --crusher-card-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 97%, var(--crusher-color-brand-primary) 3%), color-mix(in srgb, var(--crusher-background-surface) 92%, black 8%));
  --crusher-card-border: color-mix(in srgb, var(--crusher-border-primary) 58%, transparent);
  --crusher-card-shadow: 16px 16px 34px rgba(148,163,184,0.2), -10px -10px 22px rgba(255,255,255,0.82);
  --crusher-card-backdrop: none;
  --crusher-card-hover-shadow: 18px 18px 36px rgba(148,163,184,0.24), -12px -12px 24px rgba(255,255,255,0.86);
  --crusher-toolbar-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-background-surface) 93%, black 7%));
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-border-primary) 50%, transparent);
  --crusher-toolbar-shadow: 12px 12px 24px rgba(148,163,184,0.18), -8px -8px 18px rgba(255,255,255,0.76);
  --crusher-filter-bar-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 94%, var(--crusher-color-brand-primary) 6%), color-mix(in srgb, var(--crusher-background-surface) 94%, black 6%));
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-border-primary) 48%, transparent);
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-color-base-white) 98%, var(--crusher-color-brand-primary) 2%);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-border-primary) 52%, transparent);
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-border-primary) 46%, transparent);
  --crusher-nav-panel-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-background-surface) 94%, black 6%));
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-border-primary) 50%, transparent);
  --crusher-nav-panel-shadow: 12px 12px 24px rgba(148,163,184,0.18), -8px -8px 18px rgba(255,255,255,0.78);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-primary) 14%, var(--crusher-color-base-white));
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-color-brand-primary) 22%, var(--crusher-border-primary));
  --crusher-nav-item-shadow-active: 8px 8px 18px rgba(148,163,184,0.16), -8px -8px 18px rgba(255,255,255,0.82);
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-base-white) 82%, transparent);
  --code-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-primary) 4%), color-mix(in srgb, var(--crusher-background-surface) 90%, black 10%));
  --code-border: color-mix(in srgb, var(--crusher-border-primary) 64%, transparent);
  --code-pill-bg: color-mix(in srgb, var(--crusher-color-base-white) 92%, var(--crusher-color-brand-primary) 8%);
}
html[data-theme="neumorph"][data-mode="dark"] {
  --ctl-elev: 14px 14px 30px rgba(0,0,0,0.46), -10px -10px 20px rgba(255,255,255,0.05);
  --ctl-elev-hover: 18px 18px 34px rgba(0,0,0,0.52), -12px -12px 22px rgba(255,255,255,0.06);
  --crusher-surface: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --btn-outline-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-base-white) 5%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --btn-outline-border: color-mix(in srgb, var(--crusher-border-primary) 80%, transparent);
  --btn-subtle-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-base-white) 5%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --btn-subtle-border: color-mix(in srgb, var(--crusher-border-primary) 72%, transparent);
  --btn-secondary-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-brand-secondary) 76%, var(--crusher-background-surface) 24%), color-mix(in srgb, var(--crusher-color-brand-secondary) 58%, var(--crusher-background-canvas) 42%));
  --btn-secondary-border: transparent;
  --btn-secondary-shadow: 10px 10px 20px color-mix(in srgb, black 28%, transparent), -8px -8px 16px color-mix(in srgb, var(--crusher-color-base-white) 4%, transparent);
  --crusher-card-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --crusher-card-border: color-mix(in srgb, var(--crusher-border-primary) 70%, transparent);
  --crusher-card-shadow: 14px 14px 30px rgba(0,0,0,0.44), -10px -10px 18px rgba(255,255,255,0.05);
  --crusher-card-hover-shadow: 18px 18px 34px rgba(0,0,0,0.5), -12px -12px 22px rgba(255,255,255,0.06);
  --crusher-toolbar-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-border-primary) 68%, transparent);
  --crusher-toolbar-shadow: 12px 12px 24px rgba(0,0,0,0.42), -8px -8px 16px rgba(255,255,255,0.04);
  --crusher-filter-bar-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-base-white) 5%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-border-primary) 66%, transparent);
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-background-canvas) 82%, var(--crusher-background-surface) 18%);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-border-primary) 62%, transparent);
  --crusher-nav-panel-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-base-white) 5%), color-mix(in srgb, var(--crusher-background-canvas) 92%, black 8%));
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-border-primary) 64%, transparent);
  --crusher-nav-panel-shadow: 12px 12px 24px rgba(0,0,0,0.42), -8px -8px 16px rgba(255,255,255,0.04);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-primary) 18%, var(--crusher-background-surface));
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-color-brand-primary) 28%, var(--crusher-border-primary));
  --crusher-nav-item-shadow-active: 10px 10px 20px rgba(0,0,0,0.4), -8px -8px 16px rgba(255,255,255,0.04);
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-base-white) 8%, transparent);
  --code-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-base-white) 4%), color-mix(in srgb, var(--crusher-background-canvas) 90%, black 10%));
  --code-border: color-mix(in srgb, var(--crusher-border-primary) 72%, transparent);
  --code-pill-bg: color-mix(in srgb, var(--crusher-color-base-white) 8%, transparent);
}

/* ===== Bento (curved, airy) ===== */
html[data-theme="bento"] {
  --ctl-radius: var(--crusher-radius-lg);
  --ctl-elev: 0 8px 24px rgba(0,0,0,0.08);
  --ctl-elev-hover: 0 10px 28px rgba(0,0,0,0.10);
  --ctl-backdrop: none;
  --crusher-surface: color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-primary) 4%);
  --crusher-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 24%, var(--crusher-border-primary));
  --crusher-fg-muted: color-mix(in srgb, var(--crusher-text-secondary) 86%, var(--crusher-text-primary) 14%);
  --btn-secondary-bg: linear-gradient(135deg, color-mix(in srgb, var(--crusher-color-brand-secondary) 78%, var(--crusher-color-base-white) 22%), color-mix(in srgb, var(--crusher-color-brand-primary) 18%, var(--crusher-color-base-white) 82%));
  --btn-secondary-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 20%, var(--crusher-border-primary));
  --btn-secondary-shadow: 0 14px 26px color-mix(in srgb, var(--crusher-color-brand-secondary) 18%, transparent);
  --btn-subtle-bg: color-mix(in srgb, var(--crusher-color-base-white) 88%, var(--crusher-color-brand-primary) 6%);
  --crusher-card-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-secondary) 4%));
  --crusher-card-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 24%, var(--crusher-border-primary));
  --crusher-card-shadow: 0 18px 34px color-mix(in srgb, var(--crusher-color-brand-secondary) 14%, transparent);
  --crusher-card-backdrop: none;
  --crusher-card-hover-shadow: 0 22px 40px color-mix(in srgb, var(--crusher-color-brand-secondary) 18%, transparent);
  --crusher-toolbar-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--crusher-color-base-white) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-secondary) 4%));
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 24%, var(--crusher-border-primary));
  --crusher-toolbar-shadow: 0 18px 34px color-mix(in srgb, var(--crusher-color-brand-secondary) 14%, transparent);
  --crusher-filter-bar-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--crusher-color-base-white) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-color-base-white) 96%, var(--crusher-color-brand-secondary) 4%));
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 22%, var(--crusher-border-primary));
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-color-base-white) 94%, var(--crusher-color-brand-primary) 4%);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 20%, var(--crusher-border-primary));
  --crusher-nav-panel-bg: linear-gradient(135deg, color-mix(in srgb, var(--crusher-color-base-white) 94%, var(--crusher-color-brand-primary) 6%), color-mix(in srgb, var(--crusher-color-base-white) 95%, var(--crusher-color-brand-secondary) 5%));
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 22%, var(--crusher-border-primary));
  --crusher-nav-panel-shadow: 0 18px 34px color-mix(in srgb, var(--crusher-color-brand-secondary) 12%, transparent);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-primary) 16%, var(--crusher-color-base-white));
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-color-brand-secondary) 28%, var(--crusher-border-primary));
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-brand-primary) 16%, transparent);
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-color-brand-primary) 16%, var(--crusher-border-primary));
  --code-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 94%, var(--crusher-color-brand-primary) 6%), color-mix(in srgb, var(--crusher-color-base-white) 92%, var(--crusher-color-brand-secondary) 8%));
  --code-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 28%, var(--crusher-border-primary));
  --code-pill-bg: color-mix(in srgb, var(--crusher-color-base-white) 90%, var(--crusher-color-brand-primary) 10%);
}
html[data-theme="bento"][data-mode="dark"] {
  --crusher-surface: color-mix(in srgb, var(--crusher-background-surface) 92%, var(--crusher-background-canvas) 8%);
  --btn-secondary-bg: linear-gradient(135deg, color-mix(in srgb, var(--crusher-color-brand-secondary) 74%, var(--crusher-background-surface) 26%), color-mix(in srgb, var(--crusher-color-brand-primary) 18%, var(--crusher-background-surface) 82%));
  --btn-secondary-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 30%, var(--crusher-border-primary));
  --btn-secondary-shadow: 0 18px 30px color-mix(in srgb, black 28%, transparent);
  --btn-subtle-bg: color-mix(in srgb, var(--crusher-background-surface) 86%, var(--crusher-color-brand-primary) 10%);
  --crusher-card-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-brand-secondary) 4%), color-mix(in srgb, var(--crusher-background-canvas) 88%, var(--crusher-color-brand-primary) 12%));
  --crusher-card-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 34%, var(--crusher-border-primary));
  --crusher-card-shadow: 0 20px 40px color-mix(in srgb, black 30%, transparent);
  --crusher-card-hover-shadow: 0 26px 48px color-mix(in srgb, black 36%, transparent);
  --crusher-toolbar-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-background-surface) 92%, var(--crusher-color-brand-secondary) 8%));
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 34%, var(--crusher-border-primary));
  --crusher-toolbar-shadow: 0 20px 42px color-mix(in srgb, black 34%, transparent);
  --crusher-filter-bar-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-background-surface) 92%, var(--crusher-color-brand-secondary) 8%));
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 30%, var(--crusher-border-primary));
  --crusher-filter-search-bg: color-mix(in srgb, var(--crusher-background-canvas) 82%, var(--crusher-color-brand-primary) 8%);
  --crusher-filter-search-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 24%, var(--crusher-border-primary));
  --crusher-nav-panel-bg: linear-gradient(135deg, color-mix(in srgb, var(--crusher-background-surface) 95%, var(--crusher-color-brand-primary) 5%), color-mix(in srgb, var(--crusher-background-surface) 92%, var(--crusher-color-brand-secondary) 8%));
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 28%, var(--crusher-border-primary));
  --crusher-nav-panel-shadow: 0 18px 38px color-mix(in srgb, black 28%, transparent);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-primary) 18%, var(--crusher-background-surface));
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-color-brand-secondary) 32%, var(--crusher-border-primary));
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-color-brand-primary) 18%, transparent);
  --code-bg: linear-gradient(145deg, color-mix(in srgb, var(--crusher-background-surface) 96%, var(--crusher-color-brand-primary) 4%), color-mix(in srgb, var(--crusher-background-canvas) 86%, var(--crusher-color-brand-secondary) 14%));
  --code-border: color-mix(in srgb, var(--crusher-color-brand-secondary) 34%, var(--crusher-border-primary));
  --code-pill-bg: color-mix(in srgb, var(--crusher-color-brand-primary) 18%, var(--crusher-background-surface));
}