/* ═══════════════════════════════════════════════════════════════════════════
   RavenCut Design Tokens — Stitch Cinematic
   Dark theme · Cyan primary (#00D4FF) · Space Grotesk headings
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface Hierarchy ── */
  --bg-base:                    #060A0E;
  --bg-surface:                 #0C131A;
  --bg-elevated:                #121A24;
  --bg-hover:                   #182230;
  --bg-overlay:                 rgba(0, 0, 0, 0.55);

  /* ── Primary (Stitch Cinematic Cyan) ── */
  --brand-50:                   #E0FAFF;
  --brand-100:                  #B5F3FF;
  --brand-200:                  #80EBFF;
  --brand-300:                  #4DE2FF;
  --brand-400:                  #1ADAFF;
  --brand-500:                  #00D4FF;
  --brand-600:                  #00B8E6;
  --brand-700:                  #0099CC;
  --brand-800:                  #007AA3;
  --brand-900:                  #005C7A;

  /* ── Secondary (Deep Indigo / Violet accent) ── */
  --accent-violet:              #8B5CF6;
  --accent-violet-dim:          #6D28D9;
  --accent-violet-dark:         #4C1D95;
  --accent-violet-light:        #A78BFA;
  --accent-violet-subtle:       rgba(139, 92, 246, 0.08);

  /* ── Tertiary ── */
  --tertiary:                   #80EBFF;
  --tertiary-container:         #005C7A;
  --on-tertiary:                #000000;
  --on-tertiary-container:      #E0FAFF;

  /* ── Semantic ── */
  --success:                    #10B981;
  --success-container:          rgba(16, 185, 129, 0.15);
  --warning:                    #F59E0B;
  --warning-container:          rgba(245, 158, 11, 0.12);
  --danger:                     #EF4444;
  --danger-container:           rgba(239, 68, 68, 0.15);
  --info:                       #3B82F6;
  --info-container:             rgba(59, 130, 246, 0.12);
  --hot:                        #FB7185;

  /* ── Borders ── */
  --border-subtle:              rgba(255, 255, 255, 0.05);
  --border-default:             rgba(255, 255, 255, 0.09);
  --border-strong:              rgba(255, 255, 255, 0.15);
  --border-brand:               rgba(0, 212, 255, 0.40);
  --border-accent:              rgba(139, 92, 246, 0.35);
  --border-success:             rgba(16, 185, 129, 0.40);
  --border-warning:             rgba(245, 158, 11, 0.40);
  --border-danger:              rgba(239, 68, 68, 0.40);

  /* ── Text ── */
  --text-primary:               #EDF2F7;
  --text-secondary:             #9CA3AF;
  --text-muted:                 #6B7280;
  --text-disabled:              #4B5563;
  --text-inverse:               #060A0E;
  --text-brand:                 #80EBFF;
  --text-accent:                #A78BFA;
  --text-success:               #34D399;
  --text-warning:               #FBBF24;
  --text-danger:                #F87171;

  /* ── Gradients ── */
  --gradient-brand:             linear-gradient(135deg, #00D4FF 0%, #0099CC 50%, #8B5CF6 100%);
  --gradient-text:              linear-gradient(135deg, #80EBFF 0%, #1ADAFF 40%, #A78BFA 100%);
  --gradient-hero:              linear-gradient(135deg, #B5F3FF 0%, #1ADAFF 35%, #8B5CF6 70%, #A78BFA 100%);
  --gradient-card:              linear-gradient(135deg, rgba(0,212,255,0.08) 0%, rgba(139,92,246,0.04) 100%);
  --gradient-sidebar-active:    linear-gradient(135deg, rgba(0,212,255,0.12) 0%, rgba(0,184,230,0.08) 100%);

  /* ── Glows ── */
  --glow-brand:                 0 0 28px rgba(0, 212, 255, 0.40);
  --glow-violet:                0 0 24px rgba(139, 92, 246, 0.30);
  --glow-success:               0 0 16px rgba(16, 185, 129, 0.25);
  --glow-card:                  0 0 0 1px rgba(0, 212, 255, 0.45), 0 12px 32px rgba(0, 0, 0, 0.6);
  --glow-card-subtle:           0 0 0 1px rgba(0, 212, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4);

  /* ── Shadows / Elevation ── */
  --shadow-xs:                  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:                  0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md:                  0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 212, 255, 0.1);
  --shadow-lg:                  0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.15);
  --shadow-xl:                  0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 212, 255, 0.25);
  --shadow-modal:               0 25px 50px -12px rgba(0, 0, 0, 0.85);
  --shadow-card:                0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-card-hover:          var(--glow-card);

  /* ── Typography ── */
  --font-sans:                  'Inter', system-ui, -apple-system, sans-serif;
  --font-display:               'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:                  'JetBrains Mono', 'Fira Code', monospace;

  /* ── Type Scale ── */
  --text-display:                clamp(2.5rem, 5.5vw, 4.5rem);
  --text-display-lh:             1.06;
  --text-headline-xl:            clamp(1.75rem, 4vw, 2.75rem);
  --text-headline-lg:            1.75rem;
  --text-headline-md:            1.375rem;
  --text-headline-sm:            1.125rem;
  --text-body-lg:                1.0625rem;
  --text-body-md:                0.9375rem;
  --text-body-sm:                0.8125rem;
  --text-body-xs:                0.75rem;
  --text-label:                  0.6875rem;
  --text-caption:                0.625rem;

  /* ── Shape / Radii ── */
  --radius-none:                0;
  --radius-xs:                  4px;
  --radius-sm:                  6px;
  --radius-md:                  10px;
  --radius-lg:                  14px;
  --radius-xl:                  20px;
  --radius-2xl:                 24px;
  --radius-full:                9999px;

  /* ── Spacing (4px base grid) ── */
  --space-1:                    4px;
  --space-2:                    8px;
  --space-3:                    12px;
  --space-4:                    16px;
  --space-5:                    20px;
  --space-6:                    24px;
  --space-8:                    32px;
  --space-10:                   40px;
  --space-12:                   48px;
  --space-16:                   64px;
  --space-20:                   80px;

  /* ── Transitions ── */
  --transition-fast:            120ms ease;
  --transition-base:            200ms ease;
  --transition-slow:            350ms ease;
  --transition-spring:          300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base:                     0;
  --z-dropdown:                 100;
  --z-sticky:                   200;
  --z-sidebar:                  300;
  --z-overlay:                  400;
  --z-modal:                    500;
  --z-toast:                    600;
  --z-tooltip:                  700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Base Styles
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 212, 255, 0.03) 1px, transparent 0);
  background-size: 32px 32px;
  background-attachment: fixed;
}

h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
}

::selection { background: rgba(0, 212, 255, 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-elevated); }

@media (max-width: 768px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

.glow-brand { box-shadow: var(--glow-brand); }
.glow-violet  { box-shadow: var(--glow-violet); }

.text-brand  { color: var(--text-brand); }
.text-accent { color: var(--text-accent); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.bg-surface    { background: var(--bg-surface); }
.bg-elevated   { background: var(--bg-elevated); }
.bg-hover      { background: var(--bg-hover); }
.bg-brand-subtle { background: rgba(0, 212, 255, 0.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Card
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.card-elevated {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-gradient {
  background: var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card-glass {
  background: rgba(18, 26, 36, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card-glow {
  border: 1px solid transparent;
  background-image: linear-gradient(var(--bg-surface), var(--bg-surface)), var(--gradient-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Button
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--brand-600);
  color: #000;
  font-weight: 700;
  font-size: var(--text-body-md);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--brand-500);
  box-shadow: var(--glow-brand);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled {
  background: var(--bg-elevated);
  color: var(--text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  font-weight: 500;
  font-size: var(--text-body-md);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: var(--text-body-md);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--accent-violet-dim);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-body-md);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.btn-accent:hover { background: var(--accent-violet); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--border-danger);
  font-weight: 600;
  font-size: var(--text-body-md);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.btn-danger:hover { background: var(--danger-container); color: #F87171; }

.btn-shimmer {
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-400) 40%, var(--brand-600) 80%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Badge
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-new     { background: var(--success-container); color: var(--text-success); }
.badge-hot     { background: rgba(251, 113, 133, 0.15); color: var(--hot); }
.badge-pro     { background: var(--warning-container); color: var(--text-warning); }
.badge-credits { background: rgba(0, 212, 255, 0.12); color: var(--brand-400); }
.badge-neutral { background: var(--bg-hover); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Chip / Pill
   ═══════════════════════════════════════════════════════════════════════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-xs);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.chip-default  { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.chip-brand    { background: rgba(0, 212, 255, 0.1); color: var(--brand-400); border: 1px solid rgba(0, 212, 255, 0.2); }
.chip-accent   { background: var(--accent-violet-subtle); color: var(--accent-violet-light); border: 1px solid rgba(139, 92, 246, 0.15); }
.chip-success  { background: var(--success-container); color: var(--text-success); }
.chip-warning  { background: var(--warning-container); color: var(--text-warning); }
.chip-danger   { background: var(--danger-container); color: var(--text-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Input
   ═══════════════════════════════════════════════════════════════════════════ */

.input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font-size: var(--text-body-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}
.input-error { border-color: var(--border-danger); }
.input-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Tab
   ═══════════════════════════════════════════════════════════════════════════ */

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 1px solid transparent;
}
.tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.tab.active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Divider
   ═══════════════════════════════════════════════════════════════════════════ */

.divider { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; }
.divider-strong { border-color: var(--border-default); }

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Empty State
   ═══════════════════════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  gap: var(--space-4);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 1.75rem;
  color: var(--text-muted);
}
.empty-state h3 {
  font-size: var(--text-headline-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.empty-state p {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Skeleton / Loading
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes shimmer-skel { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer-skel 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Progress Bar
   ═══════════════════════════════════════════════════════════════════════════ */

.progress-track {
  height: 4px;
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Component: Tooltip
   ═══════════════════════════════════════════════════════════════════════════ */

.tooltip {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-body-xs);
  color: var(--text-primary);
  z-index: var(--z-tooltip);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0, 212, 255, 0); }
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-25px, -35px); }
}

.fade-up    { animation: fadeUp 0.45s ease both; }
.fade-in    { animation: fadeIn 0.3s ease both; }
.scale-in   { animation: scaleIn 0.35s ease both; }
.slide-up   { animation: slideUp 0.5s ease both; }
.slide-right { animation: slideRight 0.3s ease both; }

.fade-up-1  { animation: fadeUp 0.45s ease 0.07s both; }
.fade-up-2  { animation: fadeUp 0.45s ease 0.14s both; }
.fade-up-3  { animation: fadeUp 0.45s ease 0.21s both; }
.fade-up-4  { animation: fadeUp 0.45s ease 0.28s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout: Ambient Glow
   ═══════════════════════════════════════════════════════════════════════════ */

.ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 212, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}