/**
 * Interaction tokens and baseline interactive states (WCAG 2.2 AA).
 * Provides consistent hover, focus-visible and active behaviours across TraffordIS.
 */

:root {
  /* Focus ring */
  --ti-focus-ring-color: var(--color-accent-2, #948dff);
  --ti-focus-ring-width: 3px;
  --ti-focus-ring-offset: 2px;
  --ti-focus-ring-shadow: 0 0 0 var(--ti-focus-ring-width) var(--ti-focus-ring-color);

  /* Link underline */
  --ti-underline-thickness: 0.14em;
  --ti-underline-offset: 0.18em;

  /* Motion */
  --ti-interaction-transition: 140ms ease-in-out;

  /* Buttons / active state */
  --ti-active-filter: brightness(0.94);

  /* Tiles/cards */
  --ti-tile-image-hover-filter: saturate(1.08) brightness(0.92);
  --ti-tile-shadow-hover: 0 0 0 2px rgba(148, 141, 255, 0.28), 0 10px 22px rgba(0, 0, 0, 0.14);
  /*
    Focus indicator needs higher contrast than the soft purple hover halo
    (WCAG 2.4.13: >=2px width, 3:1 vs background). Solid black gives ~16:1
    against the cream section bg and ~21:1 against white card surroundings.
    Drop-shadow kept for visual elevation continuity with the hover state.
  */
  --ti-tile-shadow-focus: 0 0 0 2px #000, 0 10px 22px rgba(0, 0, 0, 0.14);

  /* Form controls */
  --ti-form-shadow-focus: 0 0 0 3px rgba(148, 141, 255, 0.32);
  --ti-form-border-hover: var(--color-grey-dark, #3f3f3f);
  --ti-form-border-focus: var(--color-accent, #948dff);
  --ti-form-bg-hover: var(--input-bg-color-hover, #f5f5f5);
}

@media (prefers-reduced-motion: reduce) {
  :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])) {
    transition: none !important;
  }
}

/* Focus-visible baseline */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--ti-focus-ring-width) solid var(--ti-focus-ring-color);
  outline-offset: var(--ti-focus-ring-offset);
}

@supports not selector(:focus-visible) {
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus {
    outline: var(--ti-focus-ring-width) solid var(--ti-focus-ring-color);
    outline-offset: var(--ti-focus-ring-offset);
  }
}

/* Interactive base transition */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])) {
  transition:
    color var(--ti-interaction-transition),
    background-color var(--ti-interaction-transition),
    border-color var(--ti-interaction-transition),
    box-shadow var(--ti-interaction-transition),
    filter var(--ti-interaction-transition),
    text-decoration-color var(--ti-interaction-transition),
    transform var(--ti-interaction-transition);
}

/* Links */
:where(a) {
  text-underline-offset: var(--ti-underline-offset);
  text-decoration-thickness: var(--ti-underline-thickness);
}

@media (hover: hover) and (pointer: fine) {
  :where(a:hover) {
    text-decoration-line: underline;
  }
}

:where(a:focus-visible) {
  text-decoration-line: underline;
}

:where(a:active) {
  text-decoration-line: underline;
  filter: var(--ti-active-filter);
}

/* Buttons (and button-styled links) */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .button,
  .btn,
  .localgov-button,
  .lgd-button
):where(:not([disabled])) {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    .btn,
    .localgov-button,
    .lgd-button
  ):where(:not([disabled])):hover {
    box-shadow: var(--ti-tile-shadow-hover);
  }
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .button,
  .btn,
  .localgov-button,
  .lgd-button
):where(:not([disabled])):active {
  transform: translateY(1px);
  filter: var(--ti-active-filter);
}

/* Form controls */
@media (hover: hover) and (pointer: fine) {
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([disabled]),
    select:not([disabled]),
    textarea:not([disabled])
  ):hover {
    border-color: var(--ti-form-border-hover);
    background-color: var(--ti-form-bg-hover);
  }
}

:where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):focus-visible {
  outline: none;
  box-shadow: var(--ti-form-shadow-focus);
  border-color: var(--ti-form-border-focus);
}