/* theme-v2.1.css — performance-tuned transitions + tokens
   Use after your base styles. Replaces theme-v2.css.
*/
:root{
  --theme-transition-ms: 1400ms;
  --theme-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glow: rgba(67,176,255,.35);

  /* Component tokens */
  --btn-bg: var(--primary);
  --btn-text: #06223a;
  --btn-bg-hover: var(--primary-2);
  --link: var(--accent);
  --success: #22d1a0;
  --warning: #f6c945;
  --danger: #ff5a8a;
  --on-success: #03120c;
  --on-warning: #231a00;
  --on-danger: #1a0011;
}

/* Limit transitions to key UI surfaces (avoid global * selector) */
html, body,
.left, .center, .right,
.viewer, .btn,
input, textarea, select,
a, .badge, .tag {
  transition:
    background-color var(--theme-transition-ms) var(--theme-ease),
    color            var(--theme-transition-ms) var(--theme-ease),
    border-color     var(--theme-transition-ms) var(--theme-ease),
    box-shadow       var(--theme-transition-ms) var(--theme-ease),
    filter           var(--theme-transition-ms) var(--theme-ease);
}
@media (prefers-reduced-motion: reduce){
  html, body,
  .left, .center, .right,
  .viewer, .btn,
  input, textarea, select,
  a, .badge, .tag { transition: none !important; }
}

/* Slow-fade mode for Suggest Prompt */
html.theme-suggest-fade .left,
html.theme-suggest-fade .center,
html.theme-suggest-fade .right,
html.theme-suggest-fade .viewer,
html.theme-suggest-fade .btn,
html.theme-suggest-fade input,
html.theme-suggest-fade textarea,
html.theme-suggest-fade select,
html.theme-suggest-fade a,
html.theme-suggest-fade .badge,
html.theme-suggest-fade .tag {
  transition-duration: 2400ms !important;
}

/* Components using tokens */
.btn{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 0;
  padding: .55rem .9rem;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--glow);
}
.btn:hover{ filter: brightness(1.05) saturate(1.05); }
.btn:active{ transform: translateY(1px); }

a{ color: var(--link); }
a:hover{ filter: brightness(1.08) saturate(1.08); }

.left,.center,.right{
  box-shadow: 0 10px 25px rgba(0,0,0,.25), 0 0 40px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.03);
}
.viewer{ box-shadow: 0 0 30px -8px var(--glow); }

.badge, .tag{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-weight:600; }
.badge-success{ background: var(--success); color: var(--on-success); }
.badge-warning{ background: var(--warning); color: var(--on-warning); }
.badge-danger{  background: var(--danger);  color: var(--on-danger);  }

input, textarea, select{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .6rem;
}
input:focus, textarea:focus, select:focus{ outline: 2px solid var(--primary); border-color: var(--primary); }