/* ===============================
   BRIDGE: Tokens → Component Vars
   =============================== */

/* src/css/bridge.css
   Keep bridge minimal; semantic.css already maps light/dark.
*/

/* ===== Generic surface primitive ===== */
.crusher-surface {
  background: var(--crusher-background-surface);
  color: var(--crusher-text-primary);
  border: 1px solid var(--crusher-border-primary);
  -webkit-backdrop-filter: blur(var(--effect-blur-md, 0));
  backdrop-filter: blur(var(--effect-blur-md, 0));
  box-shadow: var(--component-elevation, var(--shadow-1));
  border-radius: var(--component-radius, 0.5rem);
  transition: background-color 0.25s, box-shadow 0.25s, color 0.25s, border-color 0.25s;
}

/* ===== Global transition hygiene ===== */
@media (prefers-reduced-motion: no-preference) {
  * { transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .2s; }
}

/* ===== Focus ring (fallback) ===== */
:where(button,[role="button"],a,input,textarea,select):focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--state-focus-ring-width, 2px) var(--state-focus-ring-color, var(--crusher-color-brand-primary));
  border-radius: var(--component-radius, var(--crusher-radius-md));
}

/* ===============================
   CONTROL CONTRACT (defaults)
   These power all control-like components (Button, Input, Select, etc.)
   Dialects override these at [data-theme] scope.
   =============================== */

:root {
  /* Shape & depth */
  --ctl-radius: var(--crusher-component-radius, var(--crusher-radius-md));
  --ctl-border-weight: var(--crusher-component-border-weight, 1px);
  --ctl-elev: var(--crusher-component-elevation, var(--crusher-shadow-2));
  --ctl-elev-hover: var(--ctl-elev); /* dialects can lift further */
  --ctl-backdrop: none; /* e.g., blur(var(--crusher-effect-blur-md)) */
  --ctl-hover-lift: var(--crusher-component-control-hover-lift, translateY(-2px));

  /* Focus */
  --btn-focus-ring: 0 0 0 3px color-mix(in srgb, var(--crusher-color-brand-primary), #fff 80%);

  /* Variant defaults (safe & theme-agnostic) */
  --btn-primary-bg: var(--state-control-bg-default);
  --btn-primary-fg: var(--state-control-fg-default);
  --btn-primary-border: color-mix(in srgb, currentColor 12%, transparent);
  --btn-primary-shadow: var(--ctl-elev);
  --btn-primary-letter: normal;
  --btn-primary-text-shadow: none;

  --btn-secondary-bg: color-mix(in srgb, var(--crusher-color-brand-primary) 72%, var(--crusher-color-brand-secondary) 28%);
  --btn-secondary-fg: var(--crusher-color-base-white);
  --btn-secondary-border: color-mix(in srgb, var(--crusher-color-brand-primary) 28%, var(--crusher-border-primary));
  --btn-secondary-shadow: var(--ctl-elev);

  --btn-danger-bg: var(--crusher-color-brand-accent-red);
  --btn-danger-fg: var(--crusher-color-base-white);
  --btn-danger-border: color-mix(in srgb, currentColor 12%, transparent);
  --btn-danger-shadow: var(--ctl-elev);

  --btn-outline-bg: transparent;
  --btn-outline-fg: var(--crusher-text-primary);
  --btn-outline-border: var(--crusher-border-primary);
  --btn-outline-shadow: none;

  --btn-ghost-bg: color-mix(in srgb, var(--crusher-text-primary) 8%, transparent);
  --btn-ghost-fg: var(--crusher-text-primary);
  --btn-ghost-border: transparent;
  --btn-ghost-shadow: none;

  --btn-subtle-bg: var(--crusher-background-surface);
  --btn-subtle-fg: var(--crusher-text-primary);
  --btn-subtle-border: var(--crusher-border-primary);
  --btn-subtle-shadow: var(--ctl-elev);

  /* Theme-agnostic border placeholder to avoid 'transparent' borders snapping layout */
  --btn-border: var(--btn-outline-border);

  /* Card surface defaults. Dialects can override these without touching component internals. */
  --crusher-card-bg: var(--crusher-background-surface);
  --crusher-card-border: color-mix(in srgb, var(--crusher-border-primary), var(--crusher-color-base-white) 20%);
  --crusher-card-shadow: var(--crusher-shadow-2);
  --crusher-card-backdrop: blur(var(--crusher-effect-blur-md));
  --crusher-card-hover-lift: translateY(calc(var(--crusher-spacing-1) * -1));
  --crusher-card-hover-shadow: var(--crusher-shadow-2);
}