@import 'tailwindcss';

@theme {
  --font-sans: 'Comic Relief', 'Comic Neue', 'Comic Sans MS', cursive, system-ui, sans-serif;
  --font-display: 'Comic Relief', 'Comic Neue', 'Comic Sans MS', cursive, system-ui, sans-serif;

  /* Catppuccin Theme */
  --color-crust: #11111b;
  --color-mantle: #181825;
  --color-base: #1e1e2e;
  --color-surface0: #313244;
  --color-surface1: #45475a;
  --color-surface2: #585b70;
  --color-red: #f38ba8;

  --color-neon-primary: #f38ba8;
  --color-neon-alert: #f38ba8;
  --color-neon-blue: #f38ba8;
  --color-panel-glass: rgba(24, 24, 37, 0.7);


  --shadow-glow-primary: 0 0 15px rgba(243, 139, 168, 0.4);
  --shadow-glow-alert: 0 0 15px rgba(243, 139, 168, 0.4);
  --shadow-glow-blue: 0 0 15px rgba(243, 139, 168, 0.4);
  --map-icon-filter: invert(1) contrast(100) opacity(0.9);
}

.light-theme {
  --map-icon-filter: invert(0) contrast(150) opacity(0.9);
  --color-crust: #dce0e8;
  --color-mantle: #e6e9ef;
  --color-base: #eff1f5;
  --color-surface0: #ccd0da;
  --color-surface1: #bcc0cc;
  --color-surface2: #acb0be;
  --color-red: #d20f39;
  --color-neon-primary: #ea76cb;
  --color-neon-alert: #e64553;
  --color-neon-blue: #fe640b;
  --color-panel-glass: rgba(239, 241, 245, 0.9);
  color: #4c4f69 !important;
}


.light-theme .text-white,
.light-theme .text-slate-200,
.light-theme .text-slate-300,
.light-theme .text-slate-400,
.light-theme .text-slate-500 {
  color: #4c4f69 !important;
}


:root.color-blind {
  --color-neon-primary: #ffb86c;
  --color-neon-blue: #8be9fd;
}


:root.high-contrast {
  --color-crust: #000000;
  --color-mantle: #0a0a0a;
  --color-base: #111111;
}

:root.light-theme.high-contrast {
  --color-crust: #ffffff;
  --color-mantle: #f4f4f4;
  --color-base: #ebebeb;
}

.light-theme border-white {
  border-color: rgba(76, 79, 105, 0.1);
}

.light-theme .border-white\/5,
.light-theme .border-white\/10,
.light-theme .border-white\/20 {
  border-color: rgba(76, 79, 105, 0.15);
}

@utility glass-panel {
  background-color: var(--color-panel-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--color-surface1) 30%, transparent);
}

@utility text-glow {
  text-shadow: 0 0 10px currentColor;
}