/* ============================================================
   components/dark-mode.css
   --ds-* semantic token overrides for dark mode.
   The existing site.css handles --public-* / --theme-* dark mode.
   This file ensures --ds-* tokens that aren't aliased to those vars
   also respond correctly to dark mode body classes.
   ============================================================ */

:is(html.theme-dark, html.ui-mode-dark, body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) {
  /* Shadows deepen in dark mode (light shadows disappear against dark bg) */
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.20);
  --ds-shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.22);
  --ds-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.28);

  /* Select arrow re-coloured for dark backgrounds */
  --ds-select-arrow-color: rgba(226, 232, 240, 0.6);
}

/* Refresh the select arrow SVG for dark mode */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23e2e8f0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* Pricing card featured accent border stays visible in dark */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-pricing-card--featured {
  box-shadow: var(--ds-card-shadow-raised), 0 0 0 1px color-mix(in srgb, var(--ds-accent) 40%, transparent);
}

/* Feature card icon bg: slightly brighter tint in dark mode */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-feature-card__icon {
  background: color-mix(in srgb, var(--ds-accent) 18%, transparent);
}

/* Person card avatar border */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-person-card__avatar {
  border-color: color-mix(in srgb, var(--ds-border) 60%, transparent);
}

/* Hero media shadow */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-hero__media {
  box-shadow: var(--ds-shadow-xl);
}