/* Lotly v2 tokens
 * dark mode default, mint accent, high contrast
 * ------------------------------------------------- */
:root, [data-theme="dark"] {
  /* base */
  --color-bg:            #07090b;
  --color-bg-2:          #0b0e11;
  --color-surface:       #0e1216;
  --color-surface-2:     #12171d;
  --color-surface-3:     #171d25;
  --color-elevated:      #1a2028;
  --color-divider:       rgba(255,255,255,0.08);
  --color-divider-strong:rgba(255,255,255,0.14);

  /* text */
  --color-text:          #f2f5f7;
  --color-text-strong:   #ffffff;
  --color-text-muted:    #a3adb8;
  --color-text-dim:      #6e7883;

  /* accent (mint) */
  --color-primary:       #4bffb0;
  --color-primary-strong:#7bffd0;
  --color-primary-shadow:rgba(75, 255, 176, 0.18);
  --color-primary-glow:  rgba(75, 255, 176, 0.35);
  --color-primary-ink:   #062015;

  /* signals */
  --color-hot:           #ff5a5a;
  --color-hot-soft:      rgba(255, 90, 90, 0.14);
  --color-warn:          #ffbf47;
  --color-warn-soft:     rgba(255, 191, 71, 0.14);
  --color-gold:          #f5c34c;
  --color-purple:        #b088ff;

  /* rarity */
  --rarity-common-bg:    rgba(255,255,255,0.08);
  --rarity-common-fg:    #d5dae0;
  --rarity-rare-bg:      rgba(176, 136, 255, 0.16);
  --rarity-rare-fg:      #d3bfff;
  --rarity-epic-bg:      rgba(75, 255, 176, 0.14);
  --rarity-epic-fg:      #7bffd0;
  --rarity-legendary-bg: linear-gradient(135deg, rgba(245,195,76,0.22), rgba(255,90,90,0.22));
  --rarity-legendary-fg: #ffe07a;

  /* fonts */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Instrument Serif", "Times New Roman", serif;

  /* type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-hero: clamp(3rem, 8vw, 6.75rem);
  --text-hero-sm: clamp(2.25rem, 5vw, 3.5rem);

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(75,255,176,0.35), 0 12px 48px rgba(75,255,176,0.25);

  /* transitions */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 480ms;
}

/* light mode */
[data-theme="light"] {
  --color-bg:            #f5f6f8;
  --color-bg-2:          #ffffff;
  --color-surface:       #ffffff;
  --color-surface-2:     #f9fafb;
  --color-surface-3:     #f0f2f5;
  --color-elevated:      #ffffff;
  --color-divider:       rgba(0,0,0,0.08);
  --color-divider-strong:rgba(0,0,0,0.14);

  --color-text:          #171d25;
  --color-text-strong:   #05080c;
  --color-text-muted:    #4a5560;
  --color-text-dim:      #7a8590;

  --color-primary:       #00b075;
  --color-primary-strong:#008058;
  --color-primary-shadow:rgba(0, 176, 117, 0.16);
  --color-primary-glow:  rgba(0, 176, 117, 0.28);
  --color-primary-ink:   #ffffff;

  --shadow-md: 0 8px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.10);
}