/* ============================================================
   Studio Press Unified Theme — Collage
   Injected over the compiled app CSS for brand consistency
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --sp-bg:      #080807;
  --sp-bg2:     #0f0f0e;
  --sp-bg3:     #161614;
  --sp-gold:    #C9A84C;
  --sp-gold2:   #e8c97a;
  --sp-text:    #e8e4dc;
  --sp-muted:   #7a7670;
  --sp-border:  rgba(255,255,255,0.07);
}

/* ── BASE ── */
html, body {
  font-family: 'DM Sans', sans-serif !important;
}
body {
  background: var(--sp-bg) !important;
  padding-top: 56px !important;
}

/* App root should fill remaining height */
#root {
  min-height: calc(100vh - 56px);
}

/* ── SP BRAND BAR ── */
#sp-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 999999;
  background: rgba(8,8,7,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
}

/* Noise overlay */
#sp-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

.sp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.sp-logo-mark {
  width: 30px;
  height: 30px;
  background: var(--sp-gold);
  color: #080807;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  line-height: 1;
}

.sp-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sp-text);
}

.sp-divider {
  width: 1px;
  height: 18px;
  background: var(--sp-border);
  margin: 0 2px;
  flex-shrink: 0;
}

.sp-page-title {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sp-gold);
  font-weight: 400;
  font-family: 'DM Sans', sans-serif;
}

.sp-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}

.sp-nav-link {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--sp-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.sp-nav-link:hover { color: var(--sp-text); }

.sp-back-btn {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--sp-border);
  color: var(--sp-muted);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-back-btn:hover {
  border-color: var(--sp-gold);
  color: var(--sp-gold);
}

/* ── ACCENT COLOR SHIFT: Indigo → SP Gold ── */

/* Primary action buttons */
.bg-indigo-600  { background-color: var(--sp-gold) !important; }
.bg-indigo-500  { background-color: var(--sp-gold) !important; }
.bg-indigo-400  { background-color: var(--sp-gold2) !important; }
.bg-indigo-600\/80 { background-color: rgba(201,168,76,0.8) !important; }

.hover\:bg-indigo-700:hover  { background-color: #b89440 !important; }
.hover\:bg-indigo-800:hover  { background-color: #a07c30 !important; }
.hover\:bg-indigo-600:hover  { background-color: var(--sp-gold) !important; }
.hover\:bg-indigo-50:hover   { background-color: rgba(201,168,76,0.07) !important; }
.hover\:bg-indigo-100:hover  { background-color: rgba(201,168,76,0.13) !important; }

/* Background tints */
.bg-indigo-950 { background-color: #1a1410 !important; }
.bg-indigo-900 { background-color: #221a0e !important; }
.bg-indigo-100 { background-color: rgba(201,168,76,0.13) !important; }
.bg-indigo-50  { background-color: rgba(201,168,76,0.07) !important; }
.bg-indigo-200 { background-color: rgba(201,168,76,0.22) !important; }

/* Text */
.text-indigo-600 { color: var(--sp-gold)  !important; }
.text-indigo-500 { color: var(--sp-gold)  !important; }
.text-indigo-400 { color: var(--sp-gold2) !important; }
.text-indigo-700 { color: #b89440 !important; }
.text-indigo-800 { color: #a07c30 !important; }
.text-indigo-900 { color: #8a6828 !important; }
.text-indigo-950 { color: #7a5820 !important; }
.text-indigo-300 { color: var(--sp-gold2) !important; }
.text-indigo-200 { color: rgba(232,201,122,0.7) !important; }
.text-indigo-50  { color: rgba(232,228,220,0.9) !important; }

.hover\:text-indigo-600:hover { color: var(--sp-gold) !important; }
.hover\:text-indigo-700:hover { color: #b89440 !important; }
.hover\:text-indigo-800:hover { color: #a07c30 !important; }

/* Borders */
.border-indigo-600  { border-color: var(--sp-gold) !important; }
.border-indigo-500  { border-color: var(--sp-gold) !important; }
.border-indigo-300  { border-color: rgba(201,168,76,0.4) !important; }
.border-indigo-200  { border-color: rgba(201,168,76,0.25) !important; }
.border-indigo-100  { border-color: rgba(201,168,76,0.15) !important; }
.border-indigo-50   { border-color: rgba(201,168,76,0.1) !important; }

.hover\:border-indigo-600:hover { border-color: var(--sp-gold) !important; }
.hover\:border-indigo-400:hover { border-color: var(--sp-gold2) !important; }
.hover\:border-indigo-300:hover { border-color: rgba(201,168,76,0.5) !important; }
.hover\:border-indigo-200:hover { border-color: rgba(201,168,76,0.3) !important; }

/* Focus states */
.focus\:ring-indigo-500:focus           { --tw-ring-color: rgba(201,168,76,0.4) !important; }
.focus\:ring-indigo-200:focus           { --tw-ring-color: rgba(201,168,76,0.2) !important; }
.focus\:ring-indigo-100:focus           { --tw-ring-color: rgba(201,168,76,0.15) !important; }
.focus\:border-indigo-500:focus         { border-color: var(--sp-gold) !important; }
.focus-within\:ring-indigo-500:focus-within  { --tw-ring-color: rgba(201,168,76,0.4) !important; }
.focus-within\:border-indigo-500:focus-within { border-color: var(--sp-gold) !important; }

/* Toggle/checkbox */
.accent-indigo-600 { accent-color: var(--sp-gold) !important; }
.peer:checked ~ .peer-checked\:bg-indigo-600 { background-color: var(--sp-gold) !important; }
.peer:checked ~ .peer-checked\:bg-indigo-500 { background-color: var(--sp-gold) !important; }

/* Shadows */
.shadow-indigo-200 { --tw-shadow-color: rgba(201,168,76,0.25) !important; }
.shadow-indigo-100 { --tw-shadow-color: rgba(201,168,76,0.15) !important; }

/* Tab active states */
.prop-tab.active,
.stk-cat.active {
  background: rgba(201,168,76,0.15) !important;
  color: var(--sp-gold) !important;
  border-color: var(--sp-gold) !important;
}

/* Selection highlight */
.selected-item { outline-color: var(--sp-gold) !important; box-shadow: 0 0 15px rgba(201,168,76,0.3) !important; }
.slot-hover    { outline-color: var(--sp-gold) !important; }
.drag-over     { border-color: var(--sp-gold) !important; background-color: rgba(201,168,76,0.07) !important; }