/**
 * File Name: gco-ui-button.css
 * Project: GCO UI CSS Architecture Migration
 * Pattern: gco_button primitive
 *
 * KISS / R-R-R:
 * - Button-specific tokens and selectors live together in this one file.
 * - Shared spacing, radius, typography, border, colour, and interaction semantics are reused.
 * - Standard Link is a separate primitive and is not implemented here.
 * - Native buttons and anchors may both compose this presentation contract.
 */

:root {
  /* Primary Button presentation. */
  --gco-ui-button-background: var(--gco-ui-color-action);
  --gco-ui-button-border: var(--gco-ui-color-action);
  --gco-ui-button-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-button-hover-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-button-focus-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-button-selected-background: var(--gco-ui-color-accent);
  --gco-ui-button-selected-border: var(--gco-ui-color-accent);
  --gco-ui-button-selected-foreground: var(--gco-ui-text-on-light);

  /* Existing Button-owned rings retained from production. */
  --gco-ui-button-base-ring: 0 0 0 1px rgba(255, 255, 255, 0.60);
  /*
   * Hover cue uses the shared governed interaction treatment.
   * Button retains ownership of when that interaction cue applies.
   */
  --gco-ui-button-hover-ring: var(--gco-ui-interaction-hover-ring);

  /* Secondary Button on dark/default governed surfaces. */
  --gco-ui-button-secondary-background: rgba(255, 255, 255, 0.12);
  --gco-ui-button-secondary-border: #004cbe;
  --gco-ui-button-secondary-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-button-secondary-hover-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-button-secondary-focus-foreground: var(--gco-ui-text-on-dark);

  /* Proven production light-surface secondary treatment (wp-admin contract). */
  --gco-ui-button-secondary-on-light-background: #ffffff;
  --gco-ui-button-secondary-on-light-border: var(--gco-ui-color-action);
  --gco-ui-button-secondary-on-light-foreground: var(--gco-ui-color-action);
  --gco-ui-button-secondary-on-light-hover-foreground: var(--gco-ui-color-action);
  --gco-ui-button-secondary-on-light-focus-foreground: var(--gco-ui-color-action);

  --gco-ui-button-disabled-opacity: 0.55;
}

.gco-ui-button {
  display: inline-block;
  padding: var(--gco-ui-space-2) var(--gco-ui-space-4);
  background: var(--gco-ui-button-background);
  color: var(--gco-ui-button-foreground);
  border: var(--gco-ui-border-width-1) var(--gco-ui-border-style) var(--gco-ui-button-border);
  text-decoration: none;
  border-radius: var(--gco-ui-radius-2);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--gco-ui-font-weight-bold);
  line-height: 1.2;
  box-shadow: var(--gco-ui-button-base-ring);
}

/*
 * Anchor presentation remains Button-owned across browser link states.
 * Generic link styling must not recolour a link presented as a Button.
 */
.gco-ui-button:link,
.gco-ui-button:visited {
  color: var(--gco-ui-button-foreground);
}

.gco-ui-button:hover {
  color: var(--gco-ui-button-hover-foreground);
  opacity: var(--gco-ui-interaction-hover-opacity);
  box-shadow: var(--gco-ui-button-hover-ring);
}

.gco-ui-button:focus-visible {
  color: var(--gco-ui-button-focus-foreground);
  outline: var(--gco-ui-interaction-focus-ring-width) solid var(--gco-ui-interaction-focus-ring-color);
  outline-offset: var(--gco-ui-interaction-focus-ring-offset);
}

/*
 * Selected/current presentation is Button-owned.
 * Consumers provide semantic current state; workflow/page CSS must not recolour it.
 */
.gco-ui-button.is-selected,
.gco-ui-button[aria-current="page"],
.gco-ui-button.is-selected:link,
.gco-ui-button.is-selected:visited,
.gco-ui-button[aria-current="page"]:link,
.gco-ui-button[aria-current="page"]:visited {
  background: var(--gco-ui-button-selected-background);
  border-color: var(--gco-ui-button-selected-border);
  color: var(--gco-ui-button-selected-foreground);
}

.gco-ui-button:disabled,
.gco-ui-button[disabled] {
  opacity: var(--gco-ui-button-disabled-opacity);
  cursor: not-allowed;
  box-shadow: none;
}

.gco-ui-button:disabled:hover,
.gco-ui-button[disabled]:hover {
  opacity: var(--gco-ui-button-disabled-opacity);
  box-shadow: none;
}

.gco-ui-button--tight {
  padding: var(--gco-ui-space-2) var(--gco-ui-space-4);
}

.gco-ui-button--roomy {
  padding: var(--gco-ui-space-3) var(--gco-ui-space-5);
}

.gco-ui-button--secondary,
.gco-ui-button--secondary:link,
.gco-ui-button--secondary:visited {
  background: var(--gco-ui-button-secondary-background);
  border-color: var(--gco-ui-button-secondary-border);
  color: var(--gco-ui-button-secondary-foreground);
}

.gco-ui-button--secondary:hover {
  color: var(--gco-ui-button-secondary-hover-foreground);
}

.gco-ui-button--secondary:focus-visible {
  color: var(--gco-ui-button-secondary-focus-foreground);
}

/*
 * Proven light-host exception for Secondary Button only.
 * Primary Button remains identical across hosts.
 */
.gco-ui-button--secondary.gco-ui-button--on-light,
.gco-ui-button--secondary.gco-ui-button--on-light:link,
.gco-ui-button--secondary.gco-ui-button--on-light:visited {
  background: var(--gco-ui-button-secondary-on-light-background);
  border-color: var(--gco-ui-button-secondary-on-light-border);
  color: var(--gco-ui-button-secondary-on-light-foreground);
}

.gco-ui-button--secondary.gco-ui-button--on-light:hover {
  color: var(--gco-ui-button-secondary-on-light-hover-foreground);
}

.gco-ui-button--secondary.gco-ui-button--on-light:focus-visible {
  color: var(--gco-ui-button-secondary-on-light-focus-foreground);
}

@media (forced-colors: active) {
  .gco-ui-button {
    border-color: currentColor;
    forced-color-adjust: auto;
  }
}