/* SlotForge Studio · Design System v2
 * Enterprise Vegas-grade visual upgrade
 * Loaded after each page's inline CSS — overrides selectively
 * Author: Claude · 2026-05-17
 */

/* ============================================================
   FONTS — load premium typefaces
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Playfair+Display:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   DESIGN TOKENS — enterprise palette
   ============================================================ */
:root {
  /* Refined backgrounds — deeper blacks with subtle blue undertone */
  --sf-bg-deep:    #07090d;      /* deepest layer */
  --sf-bg:         #0a0c12;      /* primary bg */
  --sf-bg-elev1:   #11141b;      /* panels */
  --sf-bg-elev2:   #181c24;      /* cards */
  --sf-bg-elev3:   #1f242d;      /* hover */
  --sf-bg-glass:   rgba(17, 20, 27, .72);  /* glassmorphism */

  /* Borders — subtler */
  --sf-line-soft:  rgba(255, 255, 255, .06);
  --sf-line:       rgba(255, 255, 255, .10);
  --sf-line-strong: rgba(255, 255, 255, .18);

  /* Text */
  --sf-text:       #f1f3f7;
  --sf-text-mid:   #aab1c0;
  --sf-text-dim:   #6b7282;
  --sf-text-faint: #4a5060;

  /* Brand accent — richer gold */
  --sf-gold:       #d4af37;
  --sf-gold-bright:#f5d97c;
  --sf-gold-deep:  #8a6e1d;
  --sf-gold-gradient: linear-gradient(135deg, #f5d97c 0%, #d4af37 50%, #8a6e1d 100%);
  --sf-gold-glow:  0 0 24px rgba(212, 175, 55, .35);

  /* Casino-themed accents */
  --sf-ruby:       #c0392b;
  --sf-ruby-bright:#e74c3c;
  --sf-emerald:    #16a085;
  --sf-emerald-bright:#1abc9c;
  --sf-sapphire:   #2e5cc4;
  --sf-sapphire-bright:#3b82f6;
  --sf-amethyst:   #8b5cf6;
  --sf-onyx:       #1c1c1c;

  /* Status colors */
  --sf-success:    #10b981;
  --sf-warn:       #f59e0b;
  --sf-error:      #ef4444;
  --sf-info:       #3b82f6;

  /* Typography */
  --sf-font-display: 'Playfair Display', 'Cinzel', Georgia, serif;
  --sf-font-brand:   'Cinzel', 'Playfair Display', Georgia, serif;
  --sf-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sf-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing scale (8pt grid) */
  --sf-sp-1: 4px;
  --sf-sp-2: 8px;
  --sf-sp-3: 12px;
  --sf-sp-4: 16px;
  --sf-sp-5: 24px;
  --sf-sp-6: 32px;
  --sf-sp-7: 48px;
  --sf-sp-8: 64px;

  /* Border radii */
  --sf-r-sm: 4px;
  --sf-r-md: 8px;
  --sf-r-lg: 12px;
  --sf-r-xl: 16px;
  --sf-r-full: 9999px;

  /* Elevations */
  --sf-elev-1: 0 1px 2px rgba(0,0,0,.4);
  --sf-elev-2: 0 4px 12px rgba(0,0,0,.5);
  --sf-elev-3: 0 8px 24px rgba(0,0,0,.55);
  --sf-elev-4: 0 16px 48px rgba(0,0,0,.65);
  --sf-elev-gold: 0 8px 24px rgba(212, 175, 55, .18);

  /* Transitions */
  --sf-t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --sf-t-base: 180ms cubic-bezier(.4, 0, .2, 1);
  --sf-t-slow: 300ms cubic-bezier(.4, 0, .2, 1);

  /* Legacy aliases — for backward compat with existing page CSS */
  --bg: var(--sf-bg);
  --panel: var(--sf-bg-elev1);
  --ink-2: var(--sf-bg-elev2);
  --line: var(--sf-line);
  --text: var(--sf-text);
  --text-dim: var(--sf-text-dim);
  --muted: var(--sf-text-faint);
  --accent: var(--sf-gold);
  --accent2: var(--sf-ruby);
  --ok: var(--sf-success);
  --info: var(--sf-info);
  --err: var(--sf-error);
  --rica-red: var(--sf-ruby);
  --rica-gold: var(--sf-gold);
  --purple: var(--sf-amethyst);
  --twingaming: var(--sf-sapphire);
}

/* ============================================================
   BASE — overall improvements
   ============================================================ */
html {
  font-family: var(--sf-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1, 'kern' 1, 'ss01' 1, 'ss02' 1;
}

body {
  background: var(--sf-bg) !important;
  background-image:
    radial-gradient(ellipse at top, rgba(212, 175, 55, .03) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(46, 92, 196, .025) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--sf-text);
  font-family: var(--sf-font-body);
  font-size: 14px;
  line-height: 1.55;
}

/* Smooth scroll */
* { scroll-behavior: smooth; }

/* Selection */
::selection { background: rgba(212, 175, 55, .35); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sf-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--sf-bg-elev3); border-radius: 5px; border: 2px solid var(--sf-bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--sf-gold-deep); }

/* ============================================================
   TYPOGRAPHY — refined hierarchy
   ============================================================ */
h1, h2, h3, h4, .sf-display {
  font-family: var(--sf-font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--sf-text);
}

.sf-brand {
  font-family: var(--sf-font-brand) !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sf-mono { font-family: var(--sf-font-mono); font-feature-settings: 'zero' 1; }

.sf-gradient-gold {
  background: var(--sf-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--sf-gold);
}

/* ============================================================
   TOPBAR — unified premium look across all pages
   ============================================================ */
.topbar {
  background: var(--sf-bg-glass) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--sf-line-soft) !important;
  box-shadow: var(--sf-elev-2);
  padding: 14px 24px !important;
  gap: 14px !important;
}

.topbar h1 {
  font-family: var(--sf-font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  display: flex; align-items: center; gap: 8px;
}

.topbar .crumb {
  font-family: var(--sf-font-mono) !important;
  font-size: 10px !important;
  color: var(--sf-text-dim) !important;
  letter-spacing: .02em;
}

.topbar .btn {
  padding: 8px 14px !important;
  font-family: var(--sf-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  border-radius: var(--sf-r-md) !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-text-mid) !important;
  text-decoration: none;
  transition: all var(--sf-t-fast);
  display: inline-flex; align-items: center; gap: 6px;
}

.topbar .btn:hover {
  background: rgba(255, 255, 255, .08) !important;
  border-color: var(--sf-line-strong) !important;
  color: var(--sf-text) !important;
  transform: translateY(-1px);
}

/* ============================================================
   BUTTONS — 3-tier system
   ============================================================ */
.btn.primary, button.primary, .btn-primary {
  background: var(--sf-gold-gradient) !important;
  color: #1a1a1a !important;
  border: none !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  box-shadow: var(--sf-elev-gold), inset 0 1px 0 rgba(255,255,255,.2);
  transition: all var(--sf-t-fast);
}

.btn.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, .25), inset 0 1px 0 rgba(255,255,255,.3);
  filter: brightness(1.08);
}

.btn.primary:active { transform: translateY(0); }

.btn.green, .btn-success {
  background: linear-gradient(135deg, var(--sf-emerald-bright) 0%, var(--sf-emerald) 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(22, 160, 133, .25);
}

.btn.danger {
  background: linear-gradient(135deg, var(--sf-ruby-bright), var(--sf-ruby)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(192, 57, 43, .25);
}

/* ============================================================
   CARDS — elevation + hover refinement
   ============================================================ */
.theme-card, .prompt-card, .browser-item, .ref-section, .field-block,
.grid-card, .tile, .gen-result {
  background: var(--sf-bg-elev1) !important;
  border: 1px solid var(--sf-line-soft) !important;
  border-radius: var(--sf-r-lg) !important;
  box-shadow: var(--sf-elev-1);
  transition: all var(--sf-t-base);
  overflow: hidden;
}

.theme-card:hover, .prompt-card:hover, .browser-item:hover, .grid-card:hover, .tile:hover {
  border-color: rgba(212, 175, 55, .4) !important;
  box-shadow: var(--sf-elev-3), 0 0 0 1px rgba(212, 175, 55, .15) !important;
  transform: translateY(-2px);
}

.theme-card.active, .browser-item.active, .grid-card.active, .ref-chip.selected {
  border-color: var(--sf-gold) !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, .08), rgba(212, 175, 55, .02)) !important;
  box-shadow: 0 0 0 1px var(--sf-gold), var(--sf-elev-gold) !important;
}

/* ============================================================
   INPUTS — refined
   ============================================================ */
input[type="text"], input[type="search"], input[type="email"],
input:not([type]), textarea, select {
  background: var(--sf-bg-deep) !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-text) !important;
  border-radius: var(--sf-r-md) !important;
  padding: 10px 14px !important;
  font-family: var(--sf-font-body) !important;
  font-size: 13px !important;
  transition: all var(--sf-t-fast);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--sf-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .15);
  background: var(--sf-bg-elev1) !important;
}

textarea {
  font-family: var(--sf-font-body) !important;
  line-height: 1.6 !important;
}

textarea.prompt-edit, textarea.em-edit-input, textarea#prompt-edit {
  font-family: var(--sf-font-mono) !important;
  font-size: 12px !important;
}

/* ============================================================
   MODALS — glassmorphism
   ============================================================ */
.lightbox, .modal, .editor-modal, .cmdk-backdrop {
  background: rgba(7, 9, 13, .85) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.lightbox .info-side, .editor-modal .em-right,
.lightbox-content, .modal-content {
  background: var(--sf-bg-glass) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-left: 1px solid var(--sf-line-soft) !important;
}

/* ============================================================
   SECTIONS — section titles
   ============================================================ */
.section-title, .chat-title, h2.section-title {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--sf-text-dim) !important;
  font-family: var(--sf-font-body) !important;
}

.section-title .ct, .chat-title .badge {
  background: linear-gradient(135deg, rgba(212, 175, 55, .12), rgba(212, 175, 55, .04)) !important;
  color: var(--sf-gold) !important;
  border: 1px solid rgba(212, 175, 55, .25) !important;
  font-family: var(--sf-font-mono) !important;
  padding: 2px 8px !important;
  border-radius: var(--sf-r-full) !important;
  font-size: 9px !important;
  letter-spacing: .05em;
}

/* ============================================================
   PILLS / TAGS — refined
   ============================================================ */
.pill, .filter-pill, .preset-btn, .src-pill, .format-pill,
.sym-pill, .palette-swatch, .zone-check {
  border-radius: var(--sf-r-full) !important;
  font-family: var(--sf-font-body) !important;
  letter-spacing: .03em;
  transition: all var(--sf-t-fast);
  background: var(--sf-bg-elev1) !important;
  border: 1px solid var(--sf-line) !important;
}

.pill:hover, .filter-pill:hover, .preset-btn:hover, .format-pill:hover, .sym-pill:hover {
  border-color: rgba(212, 175, 55, .4) !important;
  background: rgba(212, 175, 55, .05) !important;
  color: var(--sf-gold) !important;
  transform: translateY(-1px);
}

.pill.active, .filter-pill.active, .sym-pill.active, .palette-swatch.active {
  background: var(--sf-gold-gradient) !important;
  color: #1a1a1a !important;
  border-color: var(--sf-gold) !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(212, 175, 55, .25);
}

.preset-btn.applied { background: linear-gradient(135deg, var(--sf-amethyst), #7c3aed) !important; color: #fff !important; }
.format-pill.active { background: var(--sf-gold-gradient) !important; color: #1a1a1a !important; }

/* ============================================================
   THUMBS / IMAGES
   ============================================================ */
.ref-chip, .ref-tile, .theme-card .thumb {
  border-radius: var(--sf-r-md) !important;
  transition: all var(--sf-t-fast);
}

.ref-chip img, .ref-tile img, .browser-item img, .tile img {
  border-radius: inherit;
  transition: transform var(--sf-t-base);
}

.ref-chip:hover img, .ref-tile:hover img, .tile:hover img {
  transform: scale(1.02);
}

/* ============================================================
   STATS / KPI cards
   ============================================================ */
.stat, .kpi {
  background: var(--sf-bg-elev1) !important;
  border: 1px solid var(--sf-line-soft) !important;
  border-radius: var(--sf-r-lg) !important;
  padding: 14px 18px !important;
  font-family: var(--sf-font-mono) !important;
  box-shadow: var(--sf-elev-1);
}

.stat b, .kpi .value {
  color: var(--sf-gold) !important;
  font-family: var(--sf-font-mono) !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes sf-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sf-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes sf-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .4); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
}

.gen-result.success { animation: sf-fade-in 240ms ease; }

/* Toasts get nicer */
#studio-toast-container > div {
  font-family: var(--sf-font-body) !important;
  font-size: 13px !important;
  border-radius: var(--sf-r-lg) !important;
  padding: 14px 18px !important;
  box-shadow: var(--sf-elev-3) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Session cost badge upgrade */
#studio-session-badge {
  background: var(--sf-bg-glass) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--sf-line-strong) !important;
  border-radius: var(--sf-r-full) !important;
  padding: 10px 18px !important;
  font-family: var(--sf-font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: var(--sf-elev-3) !important;
}

#studio-session-badge:hover {
  border-color: var(--sf-gold) !important;
  box-shadow: var(--sf-elev-4), var(--sf-elev-gold) !important;
}

/* ============================================================
   LOADING / SKELETONS
   ============================================================ */
.loader {
  border-color: var(--sf-gold) !important;
  border-top-color: transparent !important;
}

.studio-skeleton, .skeleton {
  background: linear-gradient(90deg,
    var(--sf-bg-elev1) 25%,
    var(--sf-bg-elev3) 50%,
    var(--sf-bg-elev1) 75%) !important;
  background-size: 200% 100% !important;
  animation: sf-shimmer 1.6s infinite !important;
  border-radius: var(--sf-r-sm);
}

/* ============================================================
   LIGHT THEME — refined
   ============================================================ */
body.sf-light {
  --sf-bg-deep:    #f0eee8;
  --sf-bg:         #faf8f3;
  --sf-bg-elev1:   #ffffff;
  --sf-bg-elev2:   #f4f1e9;
  --sf-bg-elev3:   #ebe6d8;
  --sf-bg-glass:   rgba(255, 255, 255, .85);
  --sf-line-soft:  rgba(0, 0, 0, .06);
  --sf-line:       rgba(0, 0, 0, .12);
  --sf-line-strong: rgba(0, 0, 0, .22);
  --sf-text:       #1a1a1a;
  --sf-text-mid:   #4b4b4b;
  --sf-text-dim:   #6f6f6f;
  --sf-text-faint: #9a9a9a;
  --bg: var(--sf-bg);
  --panel: var(--sf-bg-elev1);
  --ink-2: var(--sf-bg-elev2);
  --line: var(--sf-line);
  --text: var(--sf-text);
  --text-dim: var(--sf-text-dim);
}

body.sf-light {
  background-image:
    radial-gradient(ellipse at top, rgba(212, 175, 55, .06) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(46, 92, 196, .04) 0%, transparent 50%);
}

/* ============================================================
   PAGE-SPECIFIC POLISH
   ============================================================ */

/* Chat threads */
.chat-thread .msg .bubble {
  border-radius: var(--sf-r-lg) !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  box-shadow: var(--sf-elev-1);
}
.chat-thread .msg.user .bubble {
  background: linear-gradient(135deg, rgba(212, 175, 55, .14), rgba(212, 175, 55, .06)) !important;
  border: 1px solid rgba(212, 175, 55, .35) !important;
}
.chat-thread .msg.bot .bubble {
  background: var(--sf-bg-elev2) !important;
  border: 1px solid var(--sf-line-soft) !important;
}

/* Section dividers */
.section {
  border-bottom: 1px solid var(--sf-line-soft) !important;
}

/* My Creations tile */
.tile .info {
  padding: 12px 14px !important;
}
.tile .id {
  background: linear-gradient(135deg, rgba(212, 175, 55, .12), rgba(212, 175, 55, .04)) !important;
  color: var(--sf-gold-bright) !important;
  border: 1px solid rgba(212, 175, 55, .25);
  padding: 3px 8px !important;
  border-radius: var(--sf-r-sm) !important;
  font-family: var(--sf-font-mono) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: .03em;
}

/* Footer (subtle) */
.sf-footer {
  padding: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--sf-text-faint);
  font-family: var(--sf-font-mono);
  border-top: 1px solid var(--sf-line-soft);
  margin-top: 48px;
}
.sf-footer a { color: var(--sf-gold); text-decoration: none; }
.sf-footer a:hover { text-decoration: underline; }

/* ============================================================
   FOCUS RING — accessibility
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--sf-gold) !important;
  outline-offset: 2px !important;
  border-radius: var(--sf-r-sm);
}

/* ============================================================
   PRINT FRIENDLY (audit / cost reports)
   ============================================================ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .topbar, .btn, button, #studio-session-badge { display: none !important; }
}

/* ============================================================
   MOBILE NUDGE — small refinements on top of M8 work
   ============================================================ */
@media (max-width: 780px) {
  .topbar { padding: 10px 14px !important; flex-wrap: wrap; }
  .topbar h1 { font-size: 15px !important; }
  .topbar .btn { padding: 6px 10px !important; font-size: 10px !important; }
}