/* ==========================================================================
   glass.css — the canonical .glass material.
   Use this exact rule; do not invent glass variants in component files.
   ========================================================================== */

.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 20px 40px -10px var(--glass-shadow);
  border-radius: var(--r-card);
}

/* Strength tiers — same DNA, different intensity, no new colors. */
.glass--soft {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(255, 255, 255, 0.08);
}

.glass--strong {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
}

/* Filled-glass button: same surface, accent halo on hover. */
.glass-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  border-radius: var(--r-button);
  background: var(--glass-tint);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 20px 40px -10px var(--glass-shadow);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-out) var(--ease-out),
              background var(--t-out) var(--ease-out),
              border-color var(--t-out) var(--ease-out),
              box-shadow var(--t-out) var(--ease-out);
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px var(--accent),
    0 20px 40px -10px var(--glass-shadow);
  transform: translateY(-1px);
}

.glass-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.04);
}

.glass-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.glass-btn[disabled],
.glass-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Secondary: ghost — no fill, glass-only on hover */
.glass-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

.glass-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: none;
}

/* Card hover lift + accent halo — same .glass under the hood */
.glass-card {
  composes: glass;            /* ignored if composes unavailable — fallback below */
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--glass-tint);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 20px 40px -10px var(--glass-shadow);
  transition: transform var(--t-out) var(--ease-out),
              border-color var(--t-out) var(--ease-out),
              box-shadow var(--t-out) var(--ease-out);
}

/* `composes` is a CSS Modules feature; reset with the explicit rules above. */
.glass-card {
  /* explicit reset in case `composes` is dropped by tooling */
}