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

:root {
  /* Background */
  --bg-paper: #f5f3ec;
  --bg-aurora-1: rgba(232, 208, 168, 0.55);   /* soft cream-gold — light editorial */
  --bg-aurora-2: rgba(238, 208, 210, 0.45);   /* dusty pink blush */
  --bg-aurora-3: rgba(218, 188, 130, 0.28);   /* faint gold spotlight */

  /* Glass surfaces */
  --surface: rgba(255, 255, 255, 0.55);
  --surface-strong: rgba(255, 255, 255, 0.75);
  --border-glass: rgba(255, 255, 255, 0.7);

  /* Text */
  --text: #0a0a0a;
  --text-2: #2a2a2a;
  --text-3: #4a4a4a;
  --text-4: #737373;
  --text-5: #a3a3a3;

  /* Hairline / inverse */
  --hairline: rgba(10, 10, 10, 0.06);
  --inverse-bg: #0a0a0a;
  --inverse-fg: #f5f3ec;

  /* Semantic */
  --accent-warm: #d4c5a9;
  --accent-warm-2: #9a8870;
  --danger: #dc2626;
  --success: #16a34a;

  /* Type — Cormorant Garamond (display) + JetBrains Mono (everything else)
     Cormorant has full Vietnamese diacritic coverage; JetBrains Mono too. */
  --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;

  /* Spacing scale */
  --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;

  /* Radius */
  --r-pill: 999px;
  --r-sm: 8px;
  --r-input: 12px;
  --r-card: 20px;
  --r-shell: 24px;

  /* Shadows (light) */
  --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);

  /* Global UI scale — equivalent to a built-in browser zoom.
     Set to 1 to disable. 0.9 ≈ Chrome zoom 90%.
     Mobile override below resets to 1 so text/spacing don't compound-shrink. */
  --ui-scale: 0.9;

  /* Motion */
  --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);
}

/* Mobile: kill the global zoom so content doesn't compound-shrink on a
   viewport that's already narrow. Without this the page feels cramped:
   small font + tight padding because zoom multiplies on already-small UI. */
@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;
  }
}