/* components — buttons, cards, panels, badges, chips, dialogs.
 * Token-only. Physical 3D feel: bevels, real shadows, no cyber glow. */

/* --- buttons -------------------------------------------------------------- */
.iblis-button {
  --btn-bg-top:    color-mix(in srgb, var(--color-bg-elevated) 100%, white 5%);
  --btn-bg-bot:    var(--color-bg-elevated);
  --btn-border:    var(--color-border-default);
  --btn-shine:     rgba(255,255,255,0.06);
  --btn-edge:      rgba(0,0,0,0.45);
  --btn-fg:        var(--color-text-primary);

  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-border);
  background:
    linear-gradient(180deg, var(--btn-bg-top) 0%, var(--btn-bg-bot) 100%);
  color: var(--btn-fg);
  font: inherit; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--btn-shine),
    inset 0 -1px 0 var(--btn-edge),
    0 1px 2px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.30);
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.iblis-button:hover {
  --btn-bg-top: color-mix(in srgb, var(--color-bg-elevated) 100%, white 9%);
  --btn-border: var(--color-border-strong);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--btn-shine),
    inset 0 -1px 0 var(--btn-edge),
    0 4px 10px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.40);
}
.iblis-button:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 1px 1px rgba(0,0,0,0.30);
}
.iblis-button[disabled], .iblis-button.is-disabled {
  opacity: 0.45; cursor: not-allowed; transform: none;
  filter: saturate(60%);
}
.iblis-button:focus-visible {
  outline: 2px solid var(--color-accent-cool);
  outline-offset: 2px;
}

/* primary — red lens */
.iblis-button-primary {
  --btn-bg-top: color-mix(in srgb, var(--color-accent) 100%, white 12%);
  --btn-bg-bot: color-mix(in srgb, var(--color-accent) 100%, black 18%);
  --btn-border: color-mix(in srgb, var(--color-accent) 100%, black 35%);
  --btn-shine:  rgba(255,255,255,0.18);
  --btn-edge:   rgba(0,0,0,0.55);
  --btn-fg:     #fff;
}
.iblis-button-primary:hover {
  --btn-bg-top: color-mix(in srgb, var(--color-accent) 100%, white 20%);
  --btn-border: var(--color-accent-cool);
}

/* cool — blue lens */
.iblis-button-cool {
  --btn-bg-top: color-mix(in srgb, var(--color-accent-cool) 100%, white 12%);
  --btn-bg-bot: color-mix(in srgb, var(--color-accent-cool) 100%, black 22%);
  --btn-border: color-mix(in srgb, var(--color-accent-cool) 100%, black 40%);
  --btn-shine:  rgba(255,255,255,0.20);
  --btn-edge:   rgba(0,0,0,0.55);
  --btn-fg:     #fff;
}
.iblis-button-cool:hover {
  --btn-border: var(--color-accent);
}

/* ghost — flat, less weight */
.iblis-button-ghost {
  --btn-bg-top: transparent;
  --btn-bg-bot: transparent;
  --btn-border: var(--color-border-subtle);
  --btn-shine:  transparent;
  --btn-edge:   transparent;
  --btn-fg:     var(--color-text-secondary);
  box-shadow: none;
}
.iblis-button-ghost:hover {
  --btn-bg-top: var(--color-bg-subtle);
  --btn-bg-bot: var(--color-bg-subtle);
  --btn-fg:     var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

.iblis-button-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }

/* --- cards / panels ------------------------------------------------------- */
.iblis-card {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg-elevated) 100%, white 2%) 0%,
      var(--color-bg-elevated) 100%);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    var(--shadow-sm);
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  overflow: hidden;
}
.iblis-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    var(--shadow-md),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-color: var(--color-border-default);
}
.iblis-card h2, .iblis-card h3 { margin-top: 0; }
.iblis-card-title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}
.iblis-card-title .iblis-icon { color: var(--color-accent); }

/* --- badges + chips ------------------------------------------------------- */
.iblis-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background:
    linear-gradient(180deg, var(--color-bg-subtle), var(--color-bg-base));
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.iblis-badge-accent { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.iblis-badge-cool   { color: var(--color-accent-cool); border-color: color-mix(in srgb, var(--color-accent-cool) 60%, transparent); }

.iblis-kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background:
    linear-gradient(180deg, var(--color-bg-subtle), var(--color-bg-inset));
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 0 var(--color-border-default);
}

/* --- callouts (the wink box, etc.) --------------------------------------- */
.iblis-callout {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-left: 3px solid var(--color-accent);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-subtle)) 0%,
      var(--color-bg-subtle) 60%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-secondary);
}
.iblis-callout-cool {
  border-left-color: var(--color-accent-cool);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-accent-cool) 6%, var(--color-bg-subtle)) 0%,
      var(--color-bg-subtle) 60%);
}