@import "tailwindcss";

:root {
  /* Gemini 3 Color Palette - Dark Mode */
  --color-surface: #020617; /* Slate 950 - Deep Background */
  --color-surface-highlight: #1e293b; /* Slate 800 - Card Background */
  --color-border-light: rgba(255, 255, 255, 0.1); /* Glass Border */
  
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6; /* Main Primary */
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  --color-secondary-50: #f5f3ff;
  --color-secondary-100: #ede9fe;
  --color-secondary-200: #ddd6fe;
  --color-secondary-300: #c4b5fd;
  --color-secondary-400: #a78bfa;
  --color-secondary-500: #8b5cf6; /* Main Secondary */
  --color-secondary-600: #7c3aed;
  --color-secondary-700: #6d28d9;
  --color-secondary-800: #5b21b6;
  --color-secondary-900: #4c1d95;
  --color-secondary-950: #2e1065;
}

@theme {
  --color-surface: var(--color-surface);
  --color-surface-highlight: var(--color-surface-highlight);
  --color-border-light: var(--color-border-light);
  
  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);
  --color-primary-950: var(--color-primary-950);

  --color-secondary-50: var(--color-secondary-50);
  --color-secondary-100: var(--color-secondary-100);
  --color-secondary-200: var(--color-secondary-200);
  --color-secondary-300: var(--color-secondary-300);
  --color-secondary-400: var(--color-secondary-400);
  --color-secondary-500: var(--color-secondary-500);
  --color-secondary-600: var(--color-secondary-600);
  --color-secondary-700: var(--color-secondary-700);
  --color-secondary-800: var(--color-secondary-800);
  --color-secondary-900: var(--color-secondary-900);
  --color-secondary-950: var(--color-secondary-950);
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-blob {
  animation: blob 7s infinite;
}

/* Global Dark Mode Reset */
body {
  background-color: var(--color-surface);
  color: #f8fafc; /* Slate 50 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility Classes for Animation Delays */
.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Quill Editor Custom Styles - Dark Mode */
.ql-container {
  border: 1px solid var(--color-border-light) !important;
  border-radius: 0.5rem !important;
  font-size: 16px;
  background-color: rgba(30, 41, 59, 0.5); /* surface-highlight with opacity */
  color: #f8fafc;
}

.ql-toolbar.ql-snow {
  border: 1px solid var(--color-border-light) !important;
  border-bottom: none !important;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
  background-color: var(--color-surface-highlight);
  color: #f8fafc;
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: #cbd5e1 !important; /* Slate 300 */
}

.ql-toolbar.ql-snow .ql-fill {
  fill: #cbd5e1 !important;
}

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: var(--color-primary-400) !important;
}

.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: var(--color-primary-400) !important;
}

.ql-toolbar.ql-snow .ql-picker {
  color: #cbd5e1;
}

.ql-toolbar.ql-snow .ql-picker-options {
  background-color: var(--color-surface-highlight);
  border-color: var(--color-border-light);
}

.ql-toolbar.ql-snow .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover {
  color: #f8fafc;
}

.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: #f8fafc !important;
}

.ql-editor {
  color: #f8fafc;
}

.ql-editor.ql-blank::before {
  color: #94a3b8; /* Slate 400 */
}

/* Card Flip Animation */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-inner.rotate-y-180 {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: relative;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

  .flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: rotateY(180deg);
  pointer-events: none;
}

.flip-card-inner.rotate-y-180 .flip-card-back {
  pointer-events: auto;
}

.flip-card-inner.rotate-y-180 .flip-card-front {
  pointer-events: none;
}

/* Marquee Animation */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee-scroll 40s linear infinite;
  width: max-content; /* Ensure container fits content */
}

/* Pause on hover option */
.animate-marquee:hover {
  animation-play-state: paused;
}