@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
@import './styles/typography.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===========================
   Multi-Theme Color System
   4 Colors × 2 Modes = 8 Themes
   =========================== */

/* Classic Blue - Light Mode */
:root,
[data-theme="light-blue"] {
  --bg: 0 0% 98%;
  --surface: 220 60% 99%;
  --border: 220 20% 88%;
  --text: 220 30% 15%;
  --text-secondary: 220 15% 45%;
  --accent: 220 60% 65%;

  /* Legacy variables for backward compatibility */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 0 0% 100%;
  --primary-light: 220 60% 92%;
  --secondary: 220 60% 65%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 0 0% 100%;
  --destructive: 8 75% 55%;
  --destructive-foreground: 0 0% 100%;
  --muted: 220 20% 96%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 220 40% 97%;
  --sidebar-foreground: var(--text);
  --hover: 220 20% 93%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 45%;
  --success-light: 142 76% 90%;
  --warning: 38 92% 50%;
  --warning-light: 48 96% 89%;
  --info: 220 60% 60%;
  --info-light: 210 80% 92%;
  --indigo: 239 65% 60%;
  --indigo-light: 239 65% 92%;
  --orange: 25 90% 55%;
  --orange-light: 25 90% 92%;
}

/* Classic Blue - Dark Mode */
[data-theme="dark-blue"] {
  --bg: 220 30% 10%;
  --surface: 220 25% 14%;
  --border: 220 20% 22%;
  --text: 220 20% 90%;
  --text-secondary: 220 15% 60%;
  --accent: 220 60% 65%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 220 30% 10%;
  --primary-light: 220 60% 30%;
  --secondary: 220 60% 60%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 220 30% 10%;
  --destructive: 8 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --muted: 220 25% 18%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 220 30% 12%;
  --sidebar-foreground: var(--text);
  --hover: 220 20% 24%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 40%;
  --success-light: 142 50% 20%;
  --warning: 38 85% 45%;
  --warning-light: 40 50% 20%;
  --info: 220 60% 55%;
  --info-light: 210 50% 20%;
  --indigo: 239 60% 55%;
  --indigo-light: 239 40% 20%;
  --orange: 25 85% 50%;
  --orange-light: 25 50% 20%;
}

/* Deep Green - Light Mode */
[data-theme="light-green"] {
  --bg: 0 0% 98%;
  --surface: 150 50% 99%;
  --border: 150 20% 88%;
  --text: 150 30% 15%;
  --text-secondary: 150 15% 45%;
  --accent: 150 75% 42%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 0 0% 100%;
  --primary-light: 150 75% 95%;
  --secondary: 150 60% 55%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 0 0% 100%;
  --destructive: 8 75% 55%;
  --destructive-foreground: 0 0% 100%;
  --muted: 150 20% 96%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 150 30% 97%;
  --sidebar-foreground: var(--text);
  --hover: 150 20% 93%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 45%;
  --success-light: 142 76% 90%;
  --warning: 38 92% 50%;
  --warning-light: 48 96% 89%;
  --info: 210 80% 55%;
  --info-light: 210 80% 92%;
  --indigo: 239 65% 60%;
  --indigo-light: 239 65% 92%;
  --orange: 25 90% 55%;
  --orange-light: 25 90% 92%;
}

/* Deep Green - Dark Mode */
[data-theme="dark-green"] {
  --bg: 150 30% 10%;
  --surface: 150 25% 14%;
  --border: 150 20% 22%;
  --text: 150 15% 90%;
  --text-secondary: 150 12% 60%;
  --accent: 150 75% 45%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 150 30% 10%;
  --primary-light: 150 60% 25%;
  --secondary: 150 55% 50%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 150 30% 10%;
  --destructive: 8 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --muted: 150 25% 18%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 150 30% 12%;
  --sidebar-foreground: var(--text);
  --hover: 150 20% 24%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 40%;
  --success-light: 142 50% 20%;
  --warning: 38 85% 45%;
  --warning-light: 40 50% 20%;
  --info: 210 75% 50%;
  --info-light: 210 50% 20%;
  --indigo: 239 60% 55%;
  --indigo-light: 239 40% 20%;
  --orange: 25 85% 50%;
  --orange-light: 25 50% 20%;
}

/* Vibrant Orange - Light Mode */
[data-theme="light-orange"] {
  --bg: 0 0% 98%;
  --surface: 25 70% 99%;
  --border: 25 30% 88%;
  --text: 25 30% 15%;
  --text-secondary: 25 15% 45%;
  --accent: 25 95% 53%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 0 0% 100%;
  --primary-light: 25 95% 95%;
  --secondary: 25 80% 60%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 0 0% 100%;
  --destructive: 8 75% 55%;
  --destructive-foreground: 0 0% 100%;
  --muted: 25 20% 96%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 25 40% 97%;
  --sidebar-foreground: var(--text);
  --hover: 25 30% 93%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 45%;
  --success-light: 142 76% 90%;
  --warning: 38 92% 50%;
  --warning-light: 48 96% 89%;
  --info: 210 80% 55%;
  --info-light: 210 80% 92%;
  --indigo: 239 65% 60%;
  --indigo-light: 239 65% 92%;
  --orange: 25 90% 55%;
  --orange-light: 25 90% 92%;
}

/* Vibrant Orange - Dark Mode */
[data-theme="dark-orange"] {
  --bg: 25 30% 10%;
  --surface: 25 25% 14%;
  --border: 25 20% 22%;
  --text: 25 15% 90%;
  --text-secondary: 25 12% 60%;
  --accent: 25 95% 55%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 25 30% 10%;
  --primary-light: 25 80% 30%;
  --secondary: 25 75% 55%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 25 30% 10%;
  --destructive: 8 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --muted: 25 25% 18%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 25 30% 12%;
  --sidebar-foreground: var(--text);
  --hover: 25 20% 24%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 40%;
  --success-light: 142 50% 20%;
  --warning: 38 85% 45%;
  --warning-light: 40 50% 20%;
  --info: 210 75% 50%;
  --info-light: 210 50% 20%;
  --indigo: 239 60% 55%;
  --indigo-light: 239 40% 20%;
  --orange: 25 85% 50%;
  --orange-light: 25 50% 20%;
}

/* Elegant Purple - Light Mode */
[data-theme="light-purple"] {
  --bg: 0 0% 98%;
  --surface: 270 60% 99%;
  --border: 270 20% 88%;
  --text: 270 30% 15%;
  --text-secondary: 270 15% 45%;
  --accent: 270 75% 60%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 0 0% 100%;
  --primary-light: 270 75% 95%;
  --secondary: 270 65% 65%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 0 0% 100%;
  --destructive: 8 75% 55%;
  --destructive-foreground: 0 0% 100%;
  --muted: 270 20% 96%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 270 35% 97%;
  --sidebar-foreground: var(--text);
  --hover: 270 20% 93%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 45%;
  --success-light: 142 76% 90%;
  --warning: 38 92% 50%;
  --warning-light: 48 96% 89%;
  --info: 210 80% 55%;
  --info-light: 210 80% 92%;
  --indigo: 239 65% 60%;
  --indigo-light: 239 65% 92%;
  --orange: 25 90% 55%;
  --orange-light: 25 90% 92%;
}

/* Elegant Purple - Dark Mode */
[data-theme="dark-purple"] {
  --bg: 270 30% 10%;
  --surface: 270 25% 14%;
  --border: 270 20% 22%;
  --text: 270 15% 90%;
  --text-secondary: 270 12% 60%;
  --accent: 270 75% 62%;

  /* Legacy variables */
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: 270 30% 10%;
  --primary-light: 270 60% 30%;
  --secondary: 270 60% 58%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 270 30% 10%;
  --destructive: 8 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --muted: 270 25% 18%;
  --muted-foreground: var(--text-secondary);
  --sidebar-background: 270 30% 12%;
  --sidebar-foreground: var(--text);
  --hover: 270 20% 24%;
  --input: var(--border);
  --ring: var(--accent);
  --success: 142 71% 40%;
  --success-light: 142 50% 20%;
  --warning: 38 85% 45%;
  --warning-light: 40 50% 20%;
  --info: 210 75% 50%;
  --info-light: 210 50% 20%;
  --indigo: 239 60% 55%;
  --indigo-light: 239 40% 20%;
  --orange: 25 85% 50%;
  --orange-light: 25 50% 20%;
}

/* Alias for legacy dark mode */
[data-theme="dark"] {
  --bg: var(--bg, 220 30% 10%);
  --surface: var(--surface, 220 25% 14%);
  --border: var(--border, 220 20% 22%);
  --text: var(--text, 220 20% 90%);
  --text-secondary: var(--text-secondary, 220 15% 60%);
  --accent: var(--accent, 220 60% 65%);

  /* Apply dark-blue theme as fallback */
  --background: 220 30% 10%;
  --foreground: 220 20% 90%;
  --card: 220 25% 14%;
  --card-foreground: 220 20% 90%;
  --border: 220 20% 22%;
  --input: 220 20% 22%;
  --ring: 220 60% 65%;
  --primary: 220 60% 65%;
  --primary-foreground: 220 30% 10%;
  --primary-light: 220 60% 30%;
  --secondary: 220 60% 60%;
  --secondary-foreground: 0 0% 100%;
  --accent: 220 60% 65%;
  --accent-foreground: 220 30% 10%;
  --destructive: 8 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --muted: 220 25% 18%;
  --muted-foreground: 220 15% 60%;
  --sidebar-background: 220 30% 12%;
  --sidebar-foreground: 220 20% 90%;
  --hover: 220 20% 24%;
  --success: 142 71% 40%;
  --success-light: 142 50% 20%;
  --warning: 38 85% 45%;
  --warning-light: 40 50% 20%;
  --info: 220 60% 55%;
  --info-light: 210 50% 20%;
  --indigo: 239 60% 55%;
  --indigo-light: 239 40% 20%;
  --orange: 25 85% 50%;
  --orange-light: 25 50% 20%;
}

/* Base styles */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Code and data display should use monospace */
  code, kbd, pre {
    @apply font-mono;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ===========================
   Gradient Effects System
   Conditional styles based on data attributes
   =========================== */

/* Disable gradients when off */
[data-gradient="off"] .bg-gradient-primary,
[data-gradient="off"] .bg-gradient-brand,
[data-gradient="off"] .bg-gradient-accent {
  background-image: none !important;
  background: inherit;
}

[data-gradient="off"] .gradient-text {
  background-image: none !important;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: inherit;
}

/* Standard gradients (default) */
[data-gradient="standard"] .bg-gradient-primary {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}

[data-gradient="standard"] .bg-gradient-brand {
  background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--primary)) 100%);
}

[data-gradient="standard"] .bg-gradient-accent {
  background: linear-gradient(90deg, hsl(var(--accent)) 0%, hsl(var(--primary)) 100%);
}

/* Enhanced gradients - more vibrant with multiple color stops */
[data-gradient="enhanced"] .bg-gradient-primary {
  background: linear-gradient(135deg,
    hsl(var(--primary)) 0%,
    hsl(var(--accent)) 50%,
    hsl(var(--secondary)) 100%
  );
}

[data-gradient="enhanced"] .bg-gradient-brand {
  background: linear-gradient(135deg,
    hsl(var(--accent)) 0%,
    hsl(var(--primary)) 40%,
    hsl(var(--secondary)) 100%
  );
}

[data-gradient="enhanced"] .bg-gradient-accent {
  background: linear-gradient(90deg,
    hsl(var(--accent)) 0%,
    hsl(var(--primary)) 50%,
    hsl(var(--accent)) 100%
  );
}

/* Hover glow effects - disabled when data-hover-glow="false" */
.hover-glow,
.hover-glow-primary {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px hsla(var(--accent), 0.4);
}

.hover-glow-primary:hover {
  box-shadow: 0 0 20px hsla(var(--primary), 0.4);
}

[data-hover-glow="false"] .hover-glow:hover,
[data-hover-glow="false"] .hover-glow-primary:hover {
  box-shadow: none;
}

/* Background animation keyframes */
@keyframes slow-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Animated background gradient class */
.animate-slow-gradient {
  background-size: 200% 200%;
  animation: slow-gradient 15s ease infinite;
}

/* Disable background animation when data-bg-animation="false" */
[data-bg-animation="false"] .animate-slow-gradient {
  animation: none;
  background-size: 100% 100%;
}