/* ============================================================
 * EMOJI UNIVERSE - THEMES
 * 12 carefully tuned palettes + their CSS variables.
 * ============================================================ */

:root {
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", monospace;
  --font-hand: "Caveat", cursive;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 30px 90px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 32px var(--color-accent-soft);

  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --t-slower: 600ms;
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

  --layer-bg: 0;
  --layer-content: 10;
  --layer-toolbar: 20;
  --layer-header: 30;
  --layer-modal: 50;
  --layer-toast: 60;
  --layer-konami: 70;

  --header-h: 72px;
  --toolbar-h: 64px;
  --container-max: 1480px;
}

/* ===============================================
 *  THEME: NEON  (default - vivid cosmic neon)
 * =============================================== */
[data-theme="neon"] {
  --color-bg: #0b0118;
  --color-bg-2: #160630;
  --color-bg-3: #200a4a;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.08);
  --color-surface-3: rgba(255, 255, 255, 0.12);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-fg: #ece6ff;
  --color-fg-dim: rgba(236, 230, 255, 0.72);
  --color-fg-mute: rgba(236, 230, 255, 0.5);
  --color-accent: #ff4dd2;
  --color-accent-2: #6effff;
  --color-accent-3: #a884ff;
  --color-accent-soft: rgba(255, 77, 210, 0.45);
  --color-success: #5eff8d;
  --color-warning: #ffcf3a;
  --color-danger: #ff5566;
  --grad-hero: radial-gradient(circle at 20% 20%, #6e1bff 0%, transparent 60%),
               radial-gradient(circle at 80% 30%, #ff1bb1 0%, transparent 55%),
               radial-gradient(circle at 50% 90%, #00d4ff 0%, transparent 60%);
  --grad-accent: linear-gradient(135deg, #ff4dd2 0%, #6effff 100%);
  --grad-accent-2: linear-gradient(135deg, #a884ff 0%, #ff4dd2 50%, #ffd56e 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 77, 210, 0.12) 0%, rgba(110, 255, 255, 0.08) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: GALAXY  (deep space, indigo + gold)
 * =============================================== */
[data-theme="galaxy"] {
  --color-bg: #04061a;
  --color-bg-2: #0a0d33;
  --color-bg-3: #131a55;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-surface-3: rgba(255, 255, 255, 0.14);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.20);
  --color-fg: #e8ecff;
  --color-fg-dim: rgba(232, 236, 255, 0.7);
  --color-fg-mute: rgba(232, 236, 255, 0.45);
  --color-accent: #ffd166;
  --color-accent-2: #4cc9f0;
  --color-accent-3: #b8a4ff;
  --color-accent-soft: rgba(255, 209, 102, 0.45);
  --color-success: #80ed99;
  --color-warning: #f8961e;
  --color-danger: #ef476f;
  --grad-hero: radial-gradient(circle at 30% 25%, #1d2675 0%, transparent 55%),
               radial-gradient(circle at 70% 70%, #4527a0 0%, transparent 55%),
               radial-gradient(circle at 50% 100%, #ffd166 0%, transparent 70%);
  --grad-accent: linear-gradient(135deg, #ffd166 0%, #4cc9f0 100%);
  --grad-accent-2: linear-gradient(135deg, #f72585 0%, #b8a4ff 50%, #4cc9f0 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 209, 102, 0.10) 0%, rgba(76, 201, 240, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: SUNSET  (warm peach & magenta)
 * =============================================== */
[data-theme="sunset"] {
  --color-bg: #1c0a14;
  --color-bg-2: #361224;
  --color-bg-3: #5a1a3a;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-surface-3: rgba(255, 255, 255, 0.14);
  --color-border: rgba(255, 215, 178, 0.15);
  --color-border-strong: rgba(255, 215, 178, 0.30);
  --color-fg: #fff2e8;
  --color-fg-dim: rgba(255, 242, 232, 0.75);
  --color-fg-mute: rgba(255, 242, 232, 0.5);
  --color-accent: #ff7e5f;
  --color-accent-2: #feb47b;
  --color-accent-3: #ff3c8e;
  --color-accent-soft: rgba(255, 126, 95, 0.5);
  --color-success: #ffd56e;
  --color-warning: #ffb347;
  --color-danger: #c2185b;
  --grad-hero: radial-gradient(circle at 20% 30%, #ff7e5f 0%, transparent 55%),
               radial-gradient(circle at 80% 60%, #ff3c8e 0%, transparent 55%),
               radial-gradient(circle at 50% 90%, #feb47b 0%, transparent 60%);
  --grad-accent: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
  --grad-accent-2: linear-gradient(135deg, #ff3c8e 0%, #ff7e5f 50%, #feb47b 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 126, 95, 0.14) 0%, rgba(254, 180, 123, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: OCEAN  (deep teal + cyan)
 * =============================================== */
[data-theme="ocean"] {
  --color-bg: #021a26;
  --color-bg-2: #053b51;
  --color-bg-3: #096078;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-surface-3: rgba(255, 255, 255, 0.14);
  --color-border: rgba(166, 235, 255, 0.14);
  --color-border-strong: rgba(166, 235, 255, 0.26);
  --color-fg: #e6f9ff;
  --color-fg-dim: rgba(230, 249, 255, 0.72);
  --color-fg-mute: rgba(230, 249, 255, 0.48);
  --color-accent: #00d4ff;
  --color-accent-2: #14b8a6;
  --color-accent-3: #82eefd;
  --color-accent-soft: rgba(0, 212, 255, 0.5);
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #fb7185;
  --grad-hero: radial-gradient(circle at 30% 30%, #0e7490 0%, transparent 55%),
               radial-gradient(circle at 70% 50%, #14b8a6 0%, transparent 55%),
               radial-gradient(circle at 50% 100%, #00d4ff 0%, transparent 65%);
  --grad-accent: linear-gradient(135deg, #00d4ff 0%, #14b8a6 100%);
  --grad-accent-2: linear-gradient(135deg, #82eefd 0%, #00d4ff 50%, #14b8a6 100%);
  --grad-card: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(20, 184, 166, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: FOREST  (mossy + amber)
 * =============================================== */
[data-theme="forest"] {
  --color-bg: #0c1c10;
  --color-bg-2: #163a1f;
  --color-bg-3: #1f5630;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-surface-3: rgba(255, 255, 255, 0.14);
  --color-border: rgba(195, 230, 192, 0.14);
  --color-border-strong: rgba(195, 230, 192, 0.28);
  --color-fg: #f1f8ec;
  --color-fg-dim: rgba(241, 248, 236, 0.72);
  --color-fg-mute: rgba(241, 248, 236, 0.48);
  --color-accent: #a3e635;
  --color-accent-2: #f59e0b;
  --color-accent-3: #84cc16;
  --color-accent-soft: rgba(163, 230, 53, 0.4);
  --color-success: #84cc16;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --grad-hero: radial-gradient(circle at 30% 30%, #166534 0%, transparent 55%),
               radial-gradient(circle at 70% 60%, #65a30d 0%, transparent 55%),
               radial-gradient(circle at 50% 100%, #f59e0b 0%, transparent 65%);
  --grad-accent: linear-gradient(135deg, #a3e635 0%, #f59e0b 100%);
  --grad-accent-2: linear-gradient(135deg, #84cc16 0%, #a3e635 50%, #f59e0b 100%);
  --grad-card: linear-gradient(135deg, rgba(163, 230, 53, 0.12) 0%, rgba(245, 158, 11, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: CANDY  (pastel pink + lilac)
 * =============================================== */
[data-theme="candy"] {
  --color-bg: #1a0a23;
  --color-bg-2: #2f1542;
  --color-bg-3: #4a2070;
  --color-surface: rgba(255, 255, 255, 0.07);
  --color-surface-2: rgba(255, 255, 255, 0.11);
  --color-surface-3: rgba(255, 255, 255, 0.16);
  --color-border: rgba(255, 192, 230, 0.18);
  --color-border-strong: rgba(255, 192, 230, 0.32);
  --color-fg: #fff5fb;
  --color-fg-dim: rgba(255, 245, 251, 0.75);
  --color-fg-mute: rgba(255, 245, 251, 0.5);
  --color-accent: #ff9ad8;
  --color-accent-2: #c4b5fd;
  --color-accent-3: #ffd4e9;
  --color-accent-soft: rgba(255, 154, 216, 0.45);
  --color-success: #b9fbc0;
  --color-warning: #ffd6a5;
  --color-danger: #ffadad;
  --grad-hero: radial-gradient(circle at 25% 30%, #ff9ad8 0%, transparent 55%),
               radial-gradient(circle at 75% 50%, #c4b5fd 0%, transparent 55%),
               radial-gradient(circle at 50% 100%, #ffd4e9 0%, transparent 65%);
  --grad-accent: linear-gradient(135deg, #ff9ad8 0%, #c4b5fd 100%);
  --grad-accent-2: linear-gradient(135deg, #ffd4e9 0%, #ff9ad8 50%, #c4b5fd 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 154, 216, 0.12) 0%, rgba(196, 181, 253, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: MONO  (true monochrome + accent)
 * =============================================== */
[data-theme="mono"] {
  --color-bg: #0a0a0a;
  --color-bg-2: #141414;
  --color-bg-3: #1f1f1f;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.09);
  --color-surface-3: rgba(255, 255, 255, 0.14);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.24);
  --color-fg: #f4f4f4;
  --color-fg-dim: rgba(244, 244, 244, 0.72);
  --color-fg-mute: rgba(244, 244, 244, 0.48);
  --color-accent: #ffffff;
  --color-accent-2: #b3b3b3;
  --color-accent-3: #808080;
  --color-accent-soft: rgba(255, 255, 255, 0.35);
  --color-success: #d4d4d4;
  --color-warning: #a3a3a3;
  --color-danger: #f5f5f5;
  --grad-hero: radial-gradient(circle at 50% 40%, #1f1f1f 0%, transparent 70%);
  --grad-accent: linear-gradient(135deg, #ffffff 0%, #808080 100%);
  --grad-accent-2: linear-gradient(135deg, #f4f4f4 0%, #b3b3b3 50%, #808080 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: PAPER  (light, paperwhite)
 * =============================================== */
[data-theme="paper"] {
  --color-bg: #faf6ef;
  --color-bg-2: #f1ead9;
  --color-bg-3: #e6dec8;
  --color-surface: rgba(0, 0, 0, 0.04);
  --color-surface-2: rgba(0, 0, 0, 0.08);
  --color-surface-3: rgba(0, 0, 0, 0.12);
  --color-border: rgba(0, 0, 0, 0.10);
  --color-border-strong: rgba(0, 0, 0, 0.20);
  --color-fg: #1f1c14;
  --color-fg-dim: rgba(31, 28, 20, 0.7);
  --color-fg-mute: rgba(31, 28, 20, 0.46);
  --color-accent: #d4452f;
  --color-accent-2: #2a6f6b;
  --color-accent-3: #b67e1f;
  --color-accent-soft: rgba(212, 69, 47, 0.3);
  --color-success: #2a6f6b;
  --color-warning: #b67e1f;
  --color-danger: #b72d20;
  --grad-hero: radial-gradient(circle at 30% 30%, rgba(212, 69, 47, 0.15) 0%, transparent 55%),
               radial-gradient(circle at 70% 60%, rgba(42, 111, 107, 0.15) 0%, transparent 55%),
               radial-gradient(circle at 50% 100%, rgba(182, 126, 31, 0.18) 0%, transparent 65%);
  --grad-accent: linear-gradient(135deg, #d4452f 0%, #b67e1f 100%);
  --grad-accent-2: linear-gradient(135deg, #d4452f 0%, #b67e1f 50%, #2a6f6b 100%);
  --grad-card: linear-gradient(135deg, rgba(212, 69, 47, 0.06) 0%, rgba(42, 111, 107, 0.06) 100%);
  color-scheme: light;
}

/* ===============================================
 *  THEME: RETRO (CRT amber on green)
 * =============================================== */
[data-theme="retro"] {
  --color-bg: #051a05;
  --color-bg-2: #073007;
  --color-bg-3: #0a4a0a;
  --color-surface: rgba(126, 255, 126, 0.06);
  --color-surface-2: rgba(126, 255, 126, 0.12);
  --color-surface-3: rgba(126, 255, 126, 0.18);
  --color-border: rgba(126, 255, 126, 0.22);
  --color-border-strong: rgba(126, 255, 126, 0.4);
  --color-fg: #c9ffc9;
  --color-fg-dim: rgba(201, 255, 201, 0.75);
  --color-fg-mute: rgba(201, 255, 201, 0.5);
  --color-accent: #ffb84d;
  --color-accent-2: #7eff7e;
  --color-accent-3: #ffd966;
  --color-accent-soft: rgba(255, 184, 77, 0.5);
  --color-success: #7eff7e;
  --color-warning: #ffd966;
  --color-danger: #ff7e7e;
  --font-display: "Press Start 2P", monospace;
  --grad-hero: radial-gradient(circle at 50% 40%, rgba(126, 255, 126, 0.18) 0%, transparent 55%);
  --grad-accent: linear-gradient(135deg, #ffb84d 0%, #7eff7e 100%);
  --grad-accent-2: linear-gradient(135deg, #ffd966 0%, #ffb84d 50%, #7eff7e 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 184, 77, 0.10) 0%, rgba(126, 255, 126, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: SOLAR (high-contrast yellow-black)
 * =============================================== */
[data-theme="solar"] {
  --color-bg: #fff9d6;
  --color-bg-2: #ffeb70;
  --color-bg-3: #f5d020;
  --color-surface: rgba(0, 0, 0, 0.06);
  --color-surface-2: rgba(0, 0, 0, 0.11);
  --color-surface-3: rgba(0, 0, 0, 0.16);
  --color-border: rgba(0, 0, 0, 0.16);
  --color-border-strong: rgba(0, 0, 0, 0.32);
  --color-fg: #181400;
  --color-fg-dim: rgba(24, 20, 0, 0.7);
  --color-fg-mute: rgba(24, 20, 0, 0.46);
  --color-accent: #ff2a2a;
  --color-accent-2: #001fff;
  --color-accent-3: #ff8c00;
  --color-accent-soft: rgba(255, 42, 42, 0.3);
  --color-success: #008f4a;
  --color-warning: #d97706;
  --color-danger: #c1121f;
  --grad-hero: radial-gradient(circle at 20% 20%, #ffe066 0%, transparent 55%),
               radial-gradient(circle at 80% 80%, #ff8c00 0%, transparent 55%);
  --grad-accent: linear-gradient(135deg, #ff2a2a 0%, #ff8c00 100%);
  --grad-accent-2: linear-gradient(135deg, #001fff 0%, #ff2a2a 50%, #ff8c00 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 42, 42, 0.08) 0%, rgba(255, 140, 0, 0.08) 100%);
  color-scheme: light;
}

/* ===============================================
 *  THEME: VAPORWAVE
 * =============================================== */
[data-theme="vapor"] {
  --color-bg: #0c0625;
  --color-bg-2: #221050;
  --color-bg-3: #36206e;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-surface-3: rgba(255, 255, 255, 0.15);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-fg: #f4ecff;
  --color-fg-dim: rgba(244, 236, 255, 0.75);
  --color-fg-mute: rgba(244, 236, 255, 0.5);
  --color-accent: #ff00c8;
  --color-accent-2: #00f0ff;
  --color-accent-3: #ffe600;
  --color-accent-soft: rgba(255, 0, 200, 0.45);
  --color-success: #00f0ff;
  --color-warning: #ffe600;
  --color-danger: #ff3060;
  --grad-hero: radial-gradient(circle at 30% 20%, #ff00c8 0%, transparent 55%),
               radial-gradient(circle at 70% 60%, #00f0ff 0%, transparent 55%),
               radial-gradient(circle at 50% 100%, #ffe600 0%, transparent 65%);
  --grad-accent: linear-gradient(135deg, #ff00c8 0%, #00f0ff 100%);
  --grad-accent-2: linear-gradient(135deg, #ffe600 0%, #ff00c8 50%, #00f0ff 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 0, 200, 0.14) 0%, rgba(0, 240, 255, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: NIGHT (calm midnight)
 * =============================================== */
[data-theme="night"] {
  --color-bg: #0d1117;
  --color-bg-2: #161b22;
  --color-bg-3: #21262d;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.08);
  --color-surface-3: rgba(255, 255, 255, 0.12);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-fg: #e6edf3;
  --color-fg-dim: rgba(230, 237, 243, 0.7);
  --color-fg-mute: rgba(230, 237, 243, 0.46);
  --color-accent: #58a6ff;
  --color-accent-2: #a371f7;
  --color-accent-3: #7ee787;
  --color-accent-soft: rgba(88, 166, 255, 0.4);
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-danger: #f85149;
  --grad-hero: radial-gradient(circle at 30% 30%, rgba(88, 166, 255, 0.18) 0%, transparent 55%),
               radial-gradient(circle at 70% 70%, rgba(163, 113, 247, 0.18) 0%, transparent 55%);
  --grad-accent: linear-gradient(135deg, #58a6ff 0%, #a371f7 100%);
  --grad-accent-2: linear-gradient(135deg, #7ee787 0%, #58a6ff 50%, #a371f7 100%);
  --grad-card: linear-gradient(135deg, rgba(88, 166, 255, 0.10) 0%, rgba(163, 113, 247, 0.10) 100%);
  color-scheme: dark;
}

/* ===============================================
 *  THEME: PRIDE (rainbow accents)
 * =============================================== */
[data-theme="pride"] {
  --color-bg: #0a0a14;
  --color-bg-2: #14142c;
  --color-bg-3: #20204a;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-2: rgba(255, 255, 255, 0.10);
  --color-surface-3: rgba(255, 255, 255, 0.16);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-fg: #f6f4ff;
  --color-fg-dim: rgba(246, 244, 255, 0.75);
  --color-fg-mute: rgba(246, 244, 255, 0.5);
  --color-accent: #ff5757;
  --color-accent-2: #ffd166;
  --color-accent-3: #06d6a0;
  --color-accent-soft: rgba(255, 87, 87, 0.4);
  --color-success: #06d6a0;
  --color-warning: #ffd166;
  --color-danger: #ef476f;
  --grad-hero: linear-gradient(135deg,
    rgba(255, 0, 0, 0.18) 0%,
    rgba(255, 154, 0, 0.18) 16%,
    rgba(208, 222, 33, 0.18) 32%,
    rgba(79, 220, 74, 0.18) 48%,
    rgba(63, 218, 216, 0.18) 64%,
    rgba(47, 201, 226, 0.18) 80%,
    rgba(189, 28, 209, 0.18) 100%);
  --grad-accent: linear-gradient(135deg,
    #ff5757 0%, #ffd166 25%, #06d6a0 50%, #4cc9f0 75%, #b8a4ff 100%);
  --grad-accent-2: linear-gradient(135deg,
    #ff5757 0%, #ff9a00 16%, #ffd166 32%, #06d6a0 48%, #4cc9f0 64%, #b8a4ff 100%);
  --grad-card: linear-gradient(135deg, rgba(255, 87, 87, 0.10) 0%, rgba(184, 164, 255, 0.10) 100%);
  color-scheme: dark;
}