/**
 * File Name: gco-ui-tile.css
 * Project: GCO UI CSS Architecture Migration
 * Pattern: gco_tile primitive
 *
 * KISS / R-R-R:
 * - Tile-specific tokens and selectors live together in this one file.
 * - PL-0005 gco_tile_container remains a separate assembly.
 * - Shared spacing/radius/typography semantics are reused.
 * - Only browser-proven host differences are contextualized.
 * - No separate Tile token or matrix file.
 */

:root {
  /* Base/current governed Tile surface. */
  --gco-ui-tile-background: rgba(255, 255, 255, 0.08);
  --gco-ui-tile-border: rgba(255, 255, 255, 0.22);
  --gco-ui-tile-hover-background: rgba(255, 255, 255, 0.25);

  /* Governed selector states retained from the current primitive. */
  --gco-ui-tile-selected-background: rgba(255, 255, 255, 0.12);
  --gco-ui-tile-selected-border: #6ee7b7;
  /*
   * Existing governed Reserved / Blank state.
   * Retains the legacy ACC read-only treatment already consumed by gco_tile.
   */
  --gco-ui-tile-reserved-background: #ffe6e6;
  --gco-ui-tile-reserved-foreground: var(--gco-ui-text-on-light);

  /*
   * Proven light-host correction from Composition Lab.
   * Only border/shadow/foreground vary; the Tile contract is not duplicated.
   */
  --gco-ui-tile-on-light-border: rgba(29, 35, 39, 0.34);
  --gco-ui-tile-on-light-foreground: var(--gco-ui-text-on-light);
  --gco-ui-tile-on-light-hover-background: var(--gco-ui-color-state-hover-light);
  --gco-ui-tile-on-light-selected-background: var(--gco-ui-color-state-selected-light);
  --gco-ui-tile-on-light-shadow:
    0 0 0 1px rgba(29, 35, 39, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.10);
}

.gco-ui-tile {
  padding: var(--gco-ui-space-5);
  background: var(--gco-ui-tile-background);
  border: 1px solid var(--gco-ui-tile-border);
  border-radius: var(--gco-ui-radius-3);
  color: var(--gco-ui-text-on-dark);
}

.gco-ui-tile:hover {
  background: var(--gco-ui-tile-hover-background);
  box-shadow: var(--gco-ui-interaction-hover-ring);
}

.gco-ui-tile--selected {
  background: var(--gco-ui-tile-selected-background);
  border-color: var(--gco-ui-tile-selected-border);
}

.gco-ui-tile--selected:hover {
  background: var(--gco-ui-tile-selected-background);
  border-color: var(--gco-ui-tile-selected-border);
  box-shadow: var(--gco-ui-interaction-hover-ring);
}

.gco-ui-tile--reserved {
  background: var(--gco-ui-tile-reserved-background);
  color: var(--gco-ui-tile-reserved-foreground);
}

.gco-ui-tile--reserved:hover {
  background: var(--gco-ui-tile-reserved-background);
  box-shadow: none;
}

/*
 * Host-context exception proven by browser validation.
 * Duplicate only the attributes that actually differ.
 */
.gco-ui-tile--on-light {
  border-color: var(--gco-ui-tile-on-light-border);
  color: var(--gco-ui-tile-on-light-foreground);
  box-shadow: var(--gco-ui-tile-on-light-shadow);
}

/*
 * Browser-proven light-host state differences.
 * Only state attributes that fail on a light host are contextualized.
 */
.gco-ui-tile--on-light:hover {
  background: var(--gco-ui-tile-on-light-hover-background);
  box-shadow:
    var(--gco-ui-tile-on-light-shadow),
    var(--gco-ui-interaction-hover-ring);
}

.gco-ui-tile--selected.gco-ui-tile--on-light {
  background: var(--gco-ui-tile-on-light-selected-background);
  border-color: var(--gco-ui-tile-selected-border);
}

.gco-ui-tile--selected.gco-ui-tile--on-light:hover {
  background: var(--gco-ui-tile-on-light-selected-background);
  border-color: var(--gco-ui-tile-selected-border);
  box-shadow:
    var(--gco-ui-tile-on-light-shadow),
    var(--gco-ui-interaction-hover-ring);
}

/* Reserved / Blank remains non-interactive even on a light host. */
.gco-ui-tile--reserved.gco-ui-tile--on-light:hover {
  background: var(--gco-ui-tile-reserved-background);
  box-shadow: var(--gco-ui-tile-on-light-shadow);
}

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