/* common.css — S1 design tokens + shared components */

:root {
  /* Colors — surfaces */
  --c-bg:        #0f0f0f;
  --c-surface:   #1a1a1a;
  --c-inset:     #111;
  --c-deep:      #0a0a0a;

  /* Colors — borders */
  --c-border:    #2a2a2a;
  --c-border-m:  #333;

  /* Colors — accent */
  --c-accent:    #c977ff;
  --c-accent-bg: #1a1028;

  /* Colors — text */
  --c-text:      #e8e8e8;
  --c-text-m:    #aaa;
  --c-text-d:    #888;
  --c-text-dd:   #555;

  /* Colors — semantic */
  --c-ok:     #22aa55;
  --c-ok-bg:  #113311;
  --c-ok-t:   #66ff88;
  --c-err:    #aa3344;
  --c-err-bg: #331111;
  --c-err-t:  #ff6677;

  /* Radius */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;

  /* Font sizes */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   22px;
  --fs-2xl:  32px;

  /* Font */
  --font: 'Inter', sans-serif;
}

/* --- Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
}

/* --- Global focus-visible --- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  background: var(--c-accent);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(201, 119, 255, 0.3);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-trigger { background: #ff5e5e; font-weight: 600; }
.btn-trigger:hover { background: #ff7a7a; box-shadow: 0 0 14px rgba(255, 94, 94, 0.35); }

.btn-approve { background: var(--c-ok); }
.btn-approve:hover { background: #2bc462; box-shadow: 0 0 14px rgba(34, 170, 85, 0.35); }

.btn-reject { background: var(--c-err); }
.btn-reject:hover { background: #c44455; box-shadow: 0 0 14px rgba(170, 51, 68, 0.35); }

.btn-edit { background: #3366cc; }
.btn-edit:hover { background: #4477dd; box-shadow: 0 0 14px rgba(51, 102, 204, 0.35); }

.btn-delete { background: #552222; }
.btn-delete:hover { background: #883333; box-shadow: 0 0 14px rgba(136, 51, 51, 0.3); }

.back-btn { background: var(--c-border-m); }
.back-btn:hover { background: #444; box-shadow: none; }

.submit-btn { background: var(--c-accent); }
.btn-row { display: flex; gap: var(--sp-md); margin-top: 20px; }

/* --- Alerts (dismissable) --- */
.alert {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
  margin-bottom: 20px;
  font-size: var(--fs-md);
}

.alert span { flex: 1; }
.alert.error { background: var(--c-err-bg); color: var(--c-err-t); border: 1px solid #552233; }
.alert.success { background: var(--c-ok-bg); color: var(--c-ok-t); border: 1px solid #225533; }

.alert-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 0 var(--sp-xs);
  opacity: 0.7;
  line-height: 1;
}
.alert-close:hover { opacity: 1; }

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 2px var(--sp-sm);
  border-radius: 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.badge-pending { background: #553300; color: #ffaa33; }
.badge-approved { background: #003322; color: #33ff88; }
.badge-rejected { background: #330011; color: #ff4466; }
.badge-type { background: #222; color: var(--c-text-m); }

/* --- UI animation keyframes --- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Respect reduced motion (UI only — ad previews must always animate) --- */
@media (prefers-reduced-motion: reduce) {
  .alert, .btn, .toast, .badge,
  .settings-form input, .settings-form select,
  .editor-section, .editor-section-body {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Animation keyframes (shared by editor + overlay) --- */
@keyframes preset-float {
  from { transform: translateY(10px) rotate(calc(var(--anim-rot, 0deg) * -1)); }
  to { transform: translateY(-20px) rotate(var(--anim-rot, 0deg)); }
}
@keyframes preset-pulse {
  0%, 100% { transform: scale(1) rotate(calc(var(--anim-rot, 0deg) * -1)); }
  50% { transform: scale(1.08) rotate(var(--anim-rot, 0deg)); }
}
@keyframes preset-bounce {
  0%, 100% { transform: translateY(0) rotate(calc(var(--anim-rot, 0deg) * -1)); }
  50% { transform: translateY(-30px) rotate(var(--anim-rot, 0deg)); }
}
@keyframes preset-slide {
  from { transform: translateX(-15px) rotate(calc(var(--anim-rot, 0deg) * -1)); }
  to { transform: translateX(15px) rotate(var(--anim-rot, 0deg)); }
}
@keyframes preset-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}