/*
 * interactive-surface.css
 *
 * Purpose:
 * - Provide a standalone interaction primitive for clickable surfaces.
 * - Keep behavior consistent across buttons, cards, and icon controls.
 * - Allow zero-config usage with optional token-driven theming.
 *
 * State model:
 * - base -> hover/focus-visible -> active -> press -> disabled
 */

/*
 * 1) Token contract
 *
 * Preferred token namespace:
 * - --interactive-surface-*
 *
 * Legacy fallback tokens are still supported:
 * - --lift-*, --shadow-*, --surface-darken-*, --motion-*, --ease-*
 *
 * Implementation note:
 * - No global :root token defaults are set in this file.
 * - Defaults are resolved inline to avoid import-order conflicts.
 */

/* 2) Base primitive and token resolution */

.interactive-surface {
  /* Internal resolved tokens (public + legacy + hard fallback). */
  --_is-lift-base: var(--interactive-surface-lift-base, var(--lift-base, 0px));
  --_is-lift-hover: var(--interactive-surface-lift-hover, var(--lift-hover, -4px));
  --_is-lift-active: var(--interactive-surface-lift-active, var(--lift-active, -2px));

  --_is-shadow-base: var(--interactive-surface-shadow-base, var(--shadow-base, 0 0 0 rgba(0, 0, 0, 0)));
  --_is-shadow-hover: var(
    --interactive-surface-shadow-hover,
    var(--shadow-hover, 0 10px 28px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25))
  );
  --_is-shadow-active: var(
    --interactive-surface-shadow-active,
    var(--shadow-active, 0 6px 18px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2))
  );

  /*
   * Legacy brightness tokens are preserved, but state rendering now uses
   * a ::before state-layer pseudo-element instead of host-level filters so
   * text and icons are less likely to lose contrast in consumer themes.
   * The state layer is decoupled from box-shadow so shadow tokens set to
   * `none` (e.g. in prefers-contrast: more) cannot invalidate the
   * box-shadow declaration.
   */
  --_is-darken-hover: var(--interactive-surface-darken-hover, var(--surface-darken-hover, 0.96));
  --_is-darken-active: var(--interactive-surface-darken-active, var(--surface-darken-active, 0.98));
  --_is-state-layer-hover-opacity: var(
    --interactive-surface-state-layer-hover-opacity,
    calc(1 - var(--_is-darken-hover))
  );
  --_is-state-layer-active-opacity: var(
    --interactive-surface-state-layer-active-opacity,
    calc(1 - var(--_is-darken-active))
  );
  --_is-state-layer-color: var(--interactive-surface-state-layer-color, rgb(0 0 0));

  --_is-motion-default: var(--interactive-surface-motion-default, var(--motion-default, 140ms));
  --_is-motion-press: var(--interactive-surface-motion-press, var(--motion-press, 60ms));
  --_is-ease-standard: var(
    --interactive-surface-ease-standard,
    var(--ease-standard, cubic-bezier(0.2, 0, 0.2, 1))
  );
  --_is-ease-press: var(
    --interactive-surface-ease-press,
    var(--ease-press, cubic-bezier(0.4, 0, 0.6, 1))
  );

  --_is-bg: var(--interactive-surface-bg, var(--surface-bg, var(--bg-surface, rgb(248 250 252))));
  --_is-fg: var(--interactive-surface-fg, var(--surface-fg, var(--text-primary, rgb(17 24 39))));
  --_is-border-color: var(
    --interactive-surface-border-color,
    var(--surface-border, var(--border-color, rgba(15, 23, 42, 0.2)))
  );
  --_is-border-width: var(--interactive-surface-border-width, 1px);
  --_is-radius: var(--interactive-surface-radius, 0.75rem);

  --_is-focus-ring-color: var(--interactive-surface-focus-ring-color, var(--focus-ring, rgb(11 99 246)));
  --_is-focus-ring-width: var(--interactive-surface-focus-ring-width, 2px);
  --_is-focus-ring-offset: var(--interactive-surface-focus-ring-offset, 2px);
  --_is-disabled-opacity: var(--interactive-surface-disabled-opacity, 0.72);
  --_is-tap-highlight: var(--interactive-surface-tap-highlight-color, rgb(11 99 246 / 0.18));

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border: var(--_is-border-width) solid var(--_is-border-color);
  border-radius: var(--_is-radius);
  background-color: var(--_is-bg);
  color: var(--_is-fg);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--_is-tap-highlight);
  background-clip: padding-box;
  transform: translateY(var(--_is-lift-base)) translateZ(0) !important;
  box-shadow: var(--_is-shadow-base);
  transition:
    transform var(--_is-motion-default) var(--_is-ease-standard),
    box-shadow var(--_is-motion-default) var(--_is-ease-standard),
    background-color var(--_is-motion-default) linear,
    border-color var(--_is-motion-default) linear,
    color var(--_is-motion-default) linear,
    outline-color var(--_is-motion-default) linear;
  will-change: auto;
}

/* 2a) State-layer pseudo-element */

.interactive-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--_is-state-layer-color);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--_is-motion-default) var(--_is-ease-standard);
}

/* 3) Keyboard focus visibility */

.interactive-surface:focus {
  outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  outline-offset: var(--_is-focus-ring-offset);
}

@supports selector(:focus-visible) {
  .interactive-surface:focus {
    outline: none;
  }
}

.interactive-surface:not(.is-disabled, :disabled, [aria-disabled="true"]):focus-visible {
  transform: translateY(var(--_is-lift-hover)) translateZ(0) !important;
  box-shadow: var(--_is-shadow-hover);
  outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  outline-offset: var(--_is-focus-ring-offset);
}

.interactive-surface:not(.is-disabled, :disabled, [aria-disabled="true"]):focus-visible::before {
  opacity: var(--_is-state-layer-hover-opacity);
}

.interactive-surface[aria-disabled="true"]:focus-visible {
  outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  outline-offset: var(--_is-focus-ring-offset);
}

/* 4) Active and toggled states */

.interactive-surface.is-active:not(.is-disabled, [aria-disabled="true"]),
.interactive-surface[aria-pressed="true"]:not(.is-disabled, :disabled, [aria-disabled="true"]) {
  transform: translateY(var(--_is-lift-active)) translateZ(0) !important;
  box-shadow: var(--_is-shadow-active);
}

.interactive-surface.is-active:not(.is-disabled, [aria-disabled="true"])::before,
.interactive-surface[aria-pressed="true"]:not(.is-disabled, :disabled, [aria-disabled="true"])::before {
  opacity: var(--_is-state-layer-active-opacity);
}

/* 5) Pointer hover and press feedback */

@media (hover: hover) and (pointer: fine) {
  .interactive-surface {
    will-change: transform, box-shadow;
  }

  .interactive-surface:not(.is-disabled, :disabled, [aria-disabled="true"]):hover {
    transform: translateY(var(--_is-lift-hover)) translateZ(0) !important;
    box-shadow: var(--_is-shadow-hover);
  }

  .interactive-surface:not(.is-disabled, :disabled, [aria-disabled="true"]):hover::before {
    opacity: var(--_is-state-layer-hover-opacity);
  }
}

.interactive-surface:not(.is-disabled, :disabled, [aria-disabled="true"]):active {
  transform: translateY(var(--_is-lift-base)) translateZ(0) !important;
  box-shadow: var(--_is-shadow-base);
  transition-duration: var(--_is-motion-press);
  transition-timing-function: var(--_is-ease-press);
}

.interactive-surface:not(.is-disabled, :disabled, [aria-disabled="true"]):active::before {
  opacity: 0;
}

/* 6) Size modifiers */

.interactive-surface.size-sm {
  --interactive-surface-lift-hover: -4px;
  --interactive-surface-lift-active: -2px;
  --interactive-surface-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.2);
  --interactive-surface-shadow-active: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.interactive-surface.size-lg {
  --interactive-surface-lift-hover: -8px;
  --interactive-surface-lift-active: -4px;
  --interactive-surface-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.38), 0 3px 10px rgba(0, 0, 0, 0.3);
  --interactive-surface-shadow-active: 0 8px 22px rgba(0, 0, 0, 0.32);
}

/* 7) Icon-only modifier */

.interactive-surface.icon-only {
  --interactive-surface-lift-hover: -3px;
  --interactive-surface-lift-active: -1.5px;
  --interactive-surface-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.3);
  --interactive-surface-shadow-active: 0 2px 6px rgba(0, 0, 0, 0.25);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 0.5rem;
}

/* Optional icon-role hooks for theme toggles and accessibility controls. */
.interactive-surface.icon-only .light-icon,
.interactive-surface.icon-only [data-icon-role="light"] {
  color: var(--interactive-surface-light-icon-color, rgb(212 175 55));
}

.interactive-surface.icon-only .dark-icon,
.interactive-surface.icon-only [data-icon-role="dark"] {
  color: var(--interactive-surface-dark-icon-color, rgb(0 0 0));
}

.interactive-surface.icon-only .accessibility-icon,
.interactive-surface.icon-only [data-icon-role="accessibility"] {
  color: var(--interactive-surface-accessibility-icon-color, rgb(59 130 246));
  border-radius: 0;
}

@media (prefers-color-scheme: dark) {
  .interactive-surface.icon-only .light-icon,
  .interactive-surface.icon-only [data-icon-role="light"] {
    color: var(--interactive-surface-light-icon-color-dark, rgb(255 255 255));
  }

  .interactive-surface.icon-only .dark-icon,
  .interactive-surface.icon-only [data-icon-role="dark"] {
    color: var(--interactive-surface-dark-icon-color-dark, rgb(30 58 138));
  }

  .interactive-surface.icon-only .accessibility-icon,
  .interactive-surface.icon-only [data-icon-role="accessibility"] {
    color: var(--interactive-surface-accessibility-icon-color-dark, rgb(156 163 175));
  }
}

:where([data-theme="dark"], .theme-dark, .dark-mode, .dark) .interactive-surface.icon-only .light-icon,
:where([data-theme="dark"], .theme-dark, .dark-mode, .dark)
  .interactive-surface.icon-only
  [data-icon-role="light"] {
  color: var(--interactive-surface-light-icon-color-dark, rgb(255 255 255));
}

:where([data-theme="dark"], .theme-dark, .dark-mode, .dark) .interactive-surface.icon-only .dark-icon,
:where([data-theme="dark"], .theme-dark, .dark-mode, .dark)
  .interactive-surface.icon-only
  [data-icon-role="dark"] {
  color: var(--interactive-surface-dark-icon-color-dark, rgb(30 58 138));
}

:where([data-theme="dark"], .theme-dark, .dark-mode, .dark)
  .interactive-surface.icon-only
  .accessibility-icon,
:where([data-theme="dark"], .theme-dark, .dark-mode, .dark)
  .interactive-surface.icon-only
  [data-icon-role="accessibility"] {
  color: var(--interactive-surface-accessibility-icon-color-dark, rgb(156 163 175));
}

/* 8) Visual variant token modifiers */

.interactive-surface.variant-primary {
  --interactive-surface-darken-hover: 0.95;
  --interactive-surface-darken-active: 0.97;
}

.interactive-surface.variant-secondary {
  --interactive-surface-darken-hover: 0.97;
  --interactive-surface-darken-active: 0.99;
}

.interactive-surface.variant-accent {
  --interactive-surface-darken-hover: 0.94;
  --interactive-surface-darken-active: 0.96;
}

.interactive-surface.variant-subtle {
  --interactive-surface-darken-hover: 0.98;
  --interactive-surface-darken-active: 1;
}

.interactive-surface.variant-warning {
  --interactive-surface-darken-hover: 0.93;
  --interactive-surface-darken-active: 0.95;
}

.interactive-surface.variant-danger {
  --interactive-surface-darken-hover: 0.92;
  --interactive-surface-darken-active: 0.94;
}

/* 9) Disabled states */

.interactive-surface.is-disabled,
.interactive-surface:disabled {
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none;
  opacity: var(--_is-disabled-opacity);
  transition: none;
}

.interactive-surface[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none;
  opacity: var(--_is-disabled-opacity);
}

/* Guardrail: this class owns motion on the host element. */
.interactive-surface,
.interactive-surface:hover,
.interactive-surface:focus-visible,
.interactive-surface:active,
.interactive-surface.is-active {
  scale: 1 !important;
  rotate: 0deg !important;
  translate: 0 0 !important;
}

/* 10) Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .interactive-surface {
    transform: none !important;
    transition: none;
  }

  .interactive-surface::before {
    transition: none;
  }

  .interactive-surface:hover,
  .interactive-surface:focus-visible,
  .interactive-surface:active,
  .interactive-surface.is-active,
  .interactive-surface[aria-pressed="true"] {
    transform: none !important;
    box-shadow: none;
  }

  .interactive-surface:hover::before,
  .interactive-surface:focus-visible::before,
  .interactive-surface:active::before,
  .interactive-surface.is-active::before,
  .interactive-surface[aria-pressed="true"]::before {
    opacity: 0;
  }
}

/* 11) Contrast and forced-colors support */

@media (prefers-contrast: more) {
  .interactive-surface {
    --interactive-surface-darken-hover: 1;
    --interactive-surface-darken-active: 1;
    --interactive-surface-focus-ring-width: 3px;
    --interactive-surface-border-width: 2px;
    --interactive-surface-shadow-base: none;
    --interactive-surface-shadow-hover: none;
    --interactive-surface-shadow-active: none;
  }
}

@media (forced-colors: active) {
  .interactive-surface {
    forced-color-adjust: auto;
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
    box-shadow: none;
  }

  .interactive-surface::before {
    display: none;
  }

  .interactive-surface:hover,
  .interactive-surface:focus-visible,
  .interactive-surface.is-active,
  .interactive-surface[aria-pressed="true"],
  .interactive-surface:active {
    transform: none !important;
    box-shadow: none;
  }

  .interactive-surface:focus,
  .interactive-surface:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .interactive-surface.is-disabled,
  .interactive-surface:disabled,
  .interactive-surface[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
    opacity: 1;
  }
}