/* SoftHub Marketplace — Design Tokens (Premium Glass V1) */

:root {
  /* Background */
  --bg-paper: #f5f3ec;
  --bg-aurora-1: rgba(232, 208, 168, 0.55);
  --bg-aurora-2: rgba(238, 208, 210, 0.45);
  --bg-aurora-3: rgba(218, 188, 130, 0.28);
  --surface: rgba(255, 255, 255, 0.55);
  --surface-strong: rgba(255, 255, 255, 0.75);
  --border-glass: rgba(255, 255, 255, 0.7);
  --text: #0a0a0a;
  --text-2: #2a2a2a;
  --text-3: #4a4a4a;
  --text-4: #737373;
  --text-5: #a3a3a3;
  --hairline: rgba(10, 10, 10, 0.06);
  --inverse-bg: #0a0a0a;
  --inverse-fg: #f5f3ec;
  --accent-warm: #d4c5a9;
  --accent-warm-2: #9a8870;
  --danger: #dc2626;
  --success: #16a34a;
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 28px;
  --sp-9: 32px;
  --sp-10: 60px;
  --r-pill: 999px;
  --r-sm: 8px;
  --r-input: 12px;
  --r-card: 20px;
  --r-shell: 24px;
  --sh-sm: 0 1px 2px rgba(10, 10, 10, .04), 0 1px 1px rgba(10, 10, 10, .02);
  --sh-md: 0 8px 24px -8px rgba(10, 10, 10, .10), 0 2px 6px rgba(10, 10, 10, .04);
  --sh-lg: 0 24px 60px -20px rgba(10, 10, 10, .18), 0 6px 16px rgba(10, 10, 10, .06);
  --sh-xl: 0 40px 80px -28px rgba(10, 10, 10, .25), 0 12px 28px rgba(10, 10, 10, .08);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);
  --ui-scale: 0.9;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --d-instant: 150ms;
  --d-state: 220ms;
  --d-page: 320ms;
  --d-layout: 480ms;
}

body.dark {
  --bg-paper: #0a0a0a;
  --bg-aurora-1: rgba(80, 70, 50, 0.5);
  --bg-aurora-2: rgba(50, 70, 90, 0.4);
  --surface: rgba(30, 28, 24, 0.55);
  --surface-strong: rgba(30, 28, 24, 0.78);
  --border-glass: rgba(255, 255, 255, 0.08);
  --text: #f5f3ec;
  --text-2: #e0ddd3;
  --text-3: #b5b1a4;
  --text-4: #8a8678;
  --text-5: #5a574d;
  --hairline: rgba(255, 255, 255, 0.08);
  --inverse-bg: #f5f3ec;
  --inverse-fg: #0a0a0a;
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 768px) {
  :root { --ui-scale: 1; }
}

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