/* ===== Mode → Semantic Bridge ===============================================
   Picks from light/dark tokens and exposes the neutral names that components use.
   ============================================================================ */

/* LIGHT */
html[data-mode="light"] {
  --crusher-background-canvas:  var(--crusher-color-light-background-canvas);
  --crusher-background-surface: var(--crusher-color-light-background-surface);
  --crusher-text-primary:       var(--crusher-color-light-text-primary);
  --crusher-text-secondary:     var(--crusher-color-light-text-secondary);
  --crusher-border-primary:     var(--crusher-color-light-border-primary);
  /* Light mode renders full brand against the canvas — no softening needed. */
  --crusher-brand-on-surface:   var(--crusher-color-brand-primary);
}

/* DARK */
html[data-mode="dark"] {
  --crusher-background-canvas:  var(--crusher-color-dark-background-canvas);
  --crusher-background-surface: var(--crusher-color-dark-background-surface);
  --crusher-text-primary:       var(--crusher-color-dark-text-primary);
  --crusher-text-secondary:     var(--crusher-color-dark-text-secondary);
  --crusher-border-primary:     var(--crusher-color-dark-border-primary);
  /* Dark mode softens the brand against the dark canvas for accent strokes. */
  --crusher-brand-on-surface:   color-mix(
    in srgb,
    var(--crusher-color-brand-primary) 75%,
    var(--crusher-color-dark-background-canvas) 25%
  );
}

/* Default fallback for documents that haven't set data-mode (treat as light). */
:root {
  --crusher-brand-on-surface: var(--crusher-color-brand-primary);
}

/* Brand passthrough (theme can change these) */
:root {
  --crusher-color-brand-primary:   var(--crusher-color-brand-primary);
  --crusher-color-brand-secondary: var(--crusher-color-brand-secondary);
  --crusher-color-brand-accent-orange: var(--crusher-color-brand-accent-orange);
  --crusher-color-brand-accent-pink:   var(--crusher-color-brand-accent-pink);
  --crusher-color-brand-accent-red:    var(--crusher-color-brand-accent-red);
}

/* Fonts, spacing, radius, shadows are already prefixed by base tokens.
   Theme overlays can override them thanks to Step 1’s prefix fix. */

/* Non-visual semantic aliases */
:root {
  --crusher-surface: var(--crusher-background-surface);
  --crusher-border: var(--crusher-border-primary);
  --crusher-fg: var(--crusher-text-primary);
  --crusher-fg-muted: var(--crusher-text-secondary);
  --crusher-feedback-success: var(--crusher-color-brand-primary);
  --crusher-feedback-info: var(--crusher-color-brand-secondary);
  --crusher-feedback-warning: var(--crusher-color-brand-accent-orange);
  --crusher-feedback-danger: var(--crusher-color-brand-accent-red);
  --crusher-feedback-on-solid: var(--crusher-color-base-white);
  --crusher-layout-gap: var(--crusher-spacing-6);
  --crusher-layout-gap-tight: var(--crusher-spacing-4);
  --crusher-layout-gap-loose: var(--crusher-spacing-8);
  --crusher-stack-gap: var(--crusher-layout-gap-tight);
  --crusher-grid-gap: var(--crusher-layout-gap);
  --crusher-grid-min-column: 18rem;
  --crusher-shell-max-width: 80rem;
  --crusher-shell-padding-inline: clamp(var(--crusher-spacing-4), 3vw, var(--crusher-spacing-8));
  --crusher-shell-padding-block: var(--crusher-spacing-6);
  --crusher-shell-nav-width: 18rem;
  --crusher-shell-aside-width: 22rem;
  --crusher-nav-panel-bg: color-mix(in srgb, var(--crusher-surface) 94%, transparent);
  --crusher-nav-panel-border: color-mix(in srgb, var(--crusher-border) 78%, transparent);
  --crusher-nav-panel-shadow: var(--crusher-shadow-1);
  --crusher-nav-item-bg: transparent;
  --crusher-nav-item-bg-hover: color-mix(in srgb, var(--crusher-fg) 6%, transparent);
  --crusher-nav-item-bg-active: color-mix(in srgb, var(--crusher-color-brand-primary) 14%, transparent);
  --crusher-nav-item-border: transparent;
  --crusher-nav-item-border-active: color-mix(in srgb, var(--crusher-color-brand-primary) 38%, var(--crusher-border));
  --crusher-nav-item-shadow: none;
  --crusher-nav-item-shadow-hover: none;
  --crusher-nav-item-shadow-active: none;
  --crusher-nav-item-icon-bg: color-mix(in srgb, var(--crusher-fg) 6%, transparent);
  --crusher-nav-section-fg: var(--crusher-fg-muted);
  --crusher-nav-badge-bg: color-mix(in srgb, var(--crusher-fg) 8%, transparent);
  --crusher-nav-badge-fg: var(--crusher-fg-muted);
  --crusher-stat-tone-neutral: var(--crusher-fg-muted);
  --crusher-stat-tone-brand: var(--crusher-brand-on-surface, var(--crusher-color-brand-primary));
  --crusher-stat-tone-info: var(--crusher-feedback-info);
  --crusher-stat-tone-success: var(--crusher-feedback-success);
  --crusher-stat-tone-warning: var(--crusher-feedback-warning);
  --crusher-stat-tone-danger: var(--crusher-feedback-danger);
  --crusher-stat-value-size: var(--crusher-font-size-4xl);
  --crusher-stat-padding-block: var(--crusher-spacing-4);
  --crusher-stat-padding-inline-end: var(--crusher-spacing-4);
  --crusher-stat-padding-inline-start: calc(var(--crusher-spacing-4) + var(--crusher-spacing-2));
  --crusher-page-header-gap: var(--crusher-layout-gap-tight);
  --crusher-page-header-eyebrow: var(--crusher-color-brand-primary);
  --crusher-page-header-title-size: clamp(var(--crusher-font-size-3xl), 4vw, var(--crusher-font-size-5xl));
  --crusher-page-header-divider: color-mix(in srgb, var(--crusher-border) 70%, transparent);
  --crusher-toolbar-gap: var(--crusher-layout-gap-tight);
  --crusher-toolbar-bg: color-mix(in srgb, var(--crusher-surface) 92%, transparent);
  --crusher-toolbar-border: color-mix(in srgb, var(--crusher-border) 80%, transparent);
  --crusher-filter-bar-gap: var(--crusher-layout-gap-tight);
  --crusher-filter-bar-bg: color-mix(in srgb, var(--crusher-surface) 94%, transparent);
  --crusher-filter-bar-border: color-mix(in srgb, var(--crusher-border) 85%, transparent);
  --crusher-filter-search-bg: var(--crusher-surface);
  --crusher-filter-search-border: var(--crusher-border);

  /* Code token aliases derive from framework semantics instead of raw literals. */
  --crusher-code-token-comment: var(--crusher-text-secondary);
  --crusher-code-token-punc: var(--crusher-text-secondary);
  --crusher-code-token-keyword: var(--crusher-feedback-info);
  --crusher-code-token-operator: var(--crusher-feedback-danger);
  --crusher-code-token-number: var(--crusher-feedback-info);
  --crusher-code-token-string: var(--crusher-feedback-success);
  --crusher-code-token-function: var(--crusher-feedback-info);
  --crusher-code-token-boolean: var(--crusher-feedback-warning);
  --crusher-code-token-class: var(--crusher-feedback-info);

  /* Layering */
  --crusher-z-dropdown: 100;
  --crusher-z-tooltip:  200;
  --crusher-z-toast:    900;
  --crusher-z-modal:   1000;
  --crusher-z-palette: 1100;

  /* Density (compact|cozy|comfortable) */
  --crusher-density: comfortable;
  --crusher-density-pad: var(--crusher-spacing-3); /* comfortable */
  --crusher-density-row: 40px;                     /* comfortable row height */

  /* Table defaults */
  --crusher-table-header-bg: color-mix(in srgb, var(--crusher-fg) 6%, transparent);
  --crusher-table-hover-bg:  color-mix(in srgb, var(--crusher-fg) 8%, transparent);
  --crusher-table-selected-bg: color-mix(in srgb, var(--crusher-color-brand-primary) 12%, transparent);
}

/* Density overrides */
html[data-density="compact"],
:root[data-density="compact"] {
  --crusher-density: compact;
  --crusher-density-pad: var(--crusher-spacing-2);
  --crusher-density-row: 32px;
}
html[data-density="cozy"],
:root[data-density="cozy"] {
  --crusher-density: cozy;
  --crusher-density-pad: calc(var(--crusher-spacing-2) + 2px);
  --crusher-density-row: 36px;
}

/* RTL friendliness (logical props) */
:root, :host {
  --crusher-pad-inline: var(--crusher-density-pad);
  --crusher-pad-block:  var(--crusher-density-pad);
}

html[dir="rtl"] * { direction: rtl; }