/* =========================================================
   UI Style Kit CSS x Interactive Surface CSS Theme Bridge

   This bridge owns public paint and geometry tokens only.
   Interactive Surface state-core.css remains the sole owner of
   hover, focus, active, disabled, and reduced-motion behavior.
========================================================= */

:where([data-ui][data-theme][data-mode]) .interactive-surface {
  --interactive-surface-border-width: 1px;
  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
  --interactive-surface-fg: rgb(var(--usk-text-rgb, 18 18 18));
  --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
  --interactive-surface-focus-ring-color: rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255)));
  --interactive-surface-radius: .85rem;
  --interactive-surface-light-icon-color: rgb(var(--usk-warning-rgb, var(--usk-accent-rgb, 255 190 72)));
  --interactive-surface-dark-icon-color: rgb(var(--usk-text-rgb, 18 18 18));
  --interactive-surface-accessibility-icon-color: var(--interactive-surface-focus-ring-color);
  --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
  --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
  --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
  --interactive-surface-variant-primary-bg: rgb(var(--usk-primary-rgb, 72 120 255));
  --interactive-surface-variant-primary-fg: rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255)));
  --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
  --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
  --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
  --interactive-surface-variant-secondary-border-color: rgb(var(--usk-secondary-rgb, 96 112 128));
  --interactive-surface-variant-accent-bg: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
  --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
  --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
  --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
  --interactive-surface-variant-subtle-fg: rgb(var(--usk-text-rgb, 18 18 18));
  --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
  --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
  --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));
  --interactive-surface-variant-warning-border-color: rgb(var(--usk-warning-rgb, 255 190 72));
  --interactive-surface-variant-danger-bg: rgb(var(--usk-danger-rgb, 210 72 72));
  --interactive-surface-variant-danger-fg: rgb(var(--usk-danger-text-rgb, 255 255 255));
  --interactive-surface-variant-danger-border-color: rgb(var(--usk-danger-rgb, 210 72 72));
  --interactive-surface-level-1-bg: var(--interactive-surface-variant-subtle-bg);
  --interactive-surface-level-1-border-color: var(--interactive-surface-variant-subtle-border-color);
  --interactive-surface-level-1-shadow: 0 1px 2px rgb(var(--usk-bg-rgb, 0 0 0) / .18);
  --interactive-surface-level-2-bg: var(--interactive-surface-bg);
  --interactive-surface-level-2-border-color: var(--interactive-surface-border-color);
  --interactive-surface-level-2-shadow: 0 8px 20px rgb(var(--usk-bg-rgb, 0 0 0) / .22);
  --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
  --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
  --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);

  box-sizing: border-box;
  border: var(--interactive-surface-border-width) solid var(--interactive-surface-level-border-color, var(--interactive-surface-border-color));
  border-radius: var(--interactive-surface-radius);
  background-color: var(--interactive-surface-level-bg, var(--interactive-surface-bg));
  box-shadow: var(--interactive-surface-level-shadow, none);
  color: var(--interactive-surface-fg);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
  --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
  --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
  --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
  --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
  --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
  --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
  --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
  --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
  --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
  --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
  --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
  --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
  --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
  --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
  --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
  --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
  --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
  --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
}

/* Level selectors select paint depth without taking ownership of interaction states. */
:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
  --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
  --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
  --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
}

:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
  --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
  --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
  --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);
}