/**
 * Element Theme Bridge
 *
 * Custom elements (@duskmoon-dev/el-*) set default color values in their
 * shadow DOM via :host { --color-primary: ...; }. These defaults override
 * inherited theme values from :root / [data-theme].
 *
 * Light DOM author styles beat shadow DOM :host styles in the cascade,
 * so setting these properties to `inherit` forces custom elements to
 * pick up the theme values from the document instead of using hardcoded
 * shadow DOM defaults.
 */

el-dm-accordion,
el-dm-alert,
el-dm-art-atom,
el-dm-art-cat-stargazer,
el-dm-art-circular-gallery,
el-dm-art-color-spin,
el-dm-art-csswitch,
el-dm-art-eclipse,
el-dm-art-flower-animation,
el-dm-art-gemini-input,
el-dm-art-moon,
el-dm-art-mountain,
el-dm-art-plasma-ball,
el-dm-art-snow,
el-dm-art-snowball-preloader,
el-dm-art-sun,
el-dm-art-synthwave-starfield,
el-dm-autocomplete,
el-dm-badge,
el-dm-bottom-navigation,
el-dm-bottom-sheet,
el-dm-breadcrumbs,
el-dm-button,
el-dm-card,
el-dm-cascader,
el-dm-chip,
el-dm-datepicker,
el-dm-dialog,
el-dm-drawer,
el-dm-file-upload,
el-dm-form,
el-dm-input,
el-dm-markdown,
el-dm-markdown-input,
el-dm-menu,
el-dm-navbar,
el-dm-pagination,
el-dm-popover,
el-dm-pro-data-grid,
el-dm-progress,
el-dm-select,
el-dm-slider,
el-dm-stepper,
el-dm-switch,
el-dm-table,
el-dm-tabs,
el-dm-tooltip {
  /* Brand colors */
  --color-primary: inherit;
  --color-primary-content: inherit;
  --color-on-primary: inherit;
  --color-primary-container: inherit;
  --color-on-primary-container: inherit;
  --color-secondary: inherit;
  --color-secondary-content: inherit;
  --color-on-secondary: inherit;
  --color-secondary-container: inherit;
  --color-on-secondary-container: inherit;
  --color-tertiary: inherit;
  --color-tertiary-content: inherit;
  --color-on-tertiary: inherit;
  --color-tertiary-container: inherit;
  --color-on-tertiary-container: inherit;

  /* Surface colors */
  --color-surface: inherit;
  --color-surface-dim: inherit;
  --color-surface-bright: inherit;
  --color-surface-variant: inherit;
  --color-surface-container-lowest: inherit;
  --color-surface-container-low: inherit;
  --color-surface-container: inherit;
  --color-surface-container-high: inherit;
  --color-surface-container-highest: inherit;
  --color-on-surface: inherit;
  --color-on-surface-variant: inherit;

  /* Inverse colors */
  --color-inverse-surface: inherit;
  --color-inverse-on-surface: inherit;
  --color-inverse-primary: inherit;

  /* Semantic colors */
  --color-info: inherit;
  --color-info-content: inherit;
  --color-on-info: inherit;
  --color-info-container: inherit;
  --color-on-info-container: inherit;
  --color-success: inherit;
  --color-success-content: inherit;
  --color-on-success: inherit;
  --color-success-container: inherit;
  --color-on-success-container: inherit;
  --color-warning: inherit;
  --color-warning-content: inherit;
  --color-on-warning: inherit;
  --color-warning-container: inherit;
  --color-on-warning-container: inherit;
  --color-error: inherit;
  --color-error-content: inherit;
  --color-on-error: inherit;
  --color-error-container: inherit;
  --color-on-error-container: inherit;

  /* Accent */
  --color-accent: inherit;
  --color-accent-content: inherit;

  /* Neutral */
  --color-neutral: inherit;
  --color-neutral-content: inherit;

  /* Outline */
  --color-outline: inherit;
  --color-outline-variant: inherit;

  /* Shadow/Scrim */
  --color-shadow: inherit;
  --color-scrim: inherit;

  /* Typography */
  --font-family: inherit;
  --font-size-xs: inherit;
  --font-size-sm: inherit;
  --font-size-md: inherit;
  --font-size-lg: inherit;
  --font-size-xl: inherit;
  --font-weight-normal: inherit;
  --font-weight-medium: inherit;
  --font-weight-semibold: inherit;
  --font-weight-bold: inherit;

  /* Shape */
  --radius-sm: inherit;
  --radius-md: inherit;
  --radius-lg: inherit;
  --radius-xl: inherit;
  --radius-full: inherit;

  /* Elevation */
  --shadow-sm: inherit;
  --shadow-md: inherit;
  --shadow-lg: inherit;

  /* Spacing */
  --spacing-xs: inherit;
  --spacing-sm: inherit;
  --spacing-md: inherit;
  --spacing-lg: inherit;
  --spacing-xl: inherit;

  /* Motion */
  --transition-fast: inherit;
  --transition-normal: inherit;
  --transition-slow: inherit;

  /* Focus */
  --focus-ring: inherit;
  --focus-ring-offset: inherit;
}

/**
 * el-dm-table uses a --dm-* namespace instead of --color-*.
 * Bridge these by aliasing them to the standard --color-* tokens.
 */
el-dm-table {
  --dm-color-primary: var(--color-primary);
  --dm-color-primary-container: var(--color-primary-container);
  --dm-color-surface: var(--color-surface);
  --dm-color-surface-container: var(--color-surface-container);
  --dm-color-surface-variant: var(--color-surface-variant);
  --dm-color-on-surface: var(--color-on-surface);
  --dm-color-on-surface-variant: var(--color-on-surface-variant);
  --dm-color-outline: var(--color-outline);
  --dm-color-outline-variant: var(--color-outline-variant);
  --dm-radius-sm: var(--radius-sm);
  --dm-radius-md: var(--radius-md);
}

/**
 * el-dm-pagination uses non-standard variable names.
 * Bridge these by aliasing to the closest theme equivalents.
 */
el-dm-pagination {
  --color-border: var(--color-outline-variant);
  --color-border-hover: var(--color-outline);
  --color-surface-hover: var(--color-surface-container);
  --color-text: var(--color-on-surface);
  --color-text-muted: var(--color-on-surface-variant);
  --color-primary-contrast: var(--color-on-primary);
  --color-secondary-contrast: var(--color-on-secondary);
  --color-neutral-contrast: var(--color-neutral-content);
}

/**
 * el-dm-bottom-navigation uses non-standard variable names.
 */
el-dm-bottom-navigation {
  --color-border: var(--color-outline-variant);
  --color-text-secondary: var(--color-on-surface-variant);
}

/**
 * el-dm-popover arrow fix for left/right placements.
 * Upstream bug: shadow DOM CSS uses wrong border-hiding for left/right
 * arrow directions (copies top/bottom values instead of computing correctly).
 * Fix via ::part(arrow) until upstream resolves it.
 */
el-dm-popover[placement^="left"]::part(arrow) {
  border-top: 1px solid var(--color-outline) !important;
  border-right: 1px solid var(--color-outline) !important;
  border-bottom: none !important;
  border-left: none !important;
}

el-dm-popover[placement^="right"]::part(arrow) {
  border-bottom: 1px solid var(--color-outline) !important;
  border-left: 1px solid var(--color-outline) !important;
  border-top: none !important;
  border-right: none !important;
}