veza/apps/web/src/index.css

@import 'tailwindcss';

@theme {
  /* === KODO DESIGN SYSTEM - DEFAULTS === */
  /* Map shadcn variables to Kodo colors by default */
  --color-background: rgb(var(--kodo-void));
  --color-foreground: rgb(var(--kodo-text-main));
  --color-card: rgb(var(--kodo-graphite));
  --color-card-foreground: rgb(var(--kodo-text-main));
  --color-popover: rgb(var(--kodo-ink));
  --color-popover-foreground: rgb(var(--kodo-text-main));
  --color-primary: rgb(var(--kodo-cyan));
  --color-primary-foreground: rgb(var(--kodo-void));
  --color-secondary: rgb(var(--kodo-slate));
  --color-secondary-foreground: rgb(var(--kodo-text-main));
  --color-muted: rgb(var(--kodo-steel));
  --color-muted-foreground: rgb(var(--kodo-content-dim));
  --color-accent: rgb(var(--kodo-cyan));
  --color-accent-foreground: rgb(var(--kodo-void));
  --color-destructive: rgb(var(--kodo-red));
  --color-destructive-foreground: rgb(var(--kodo-text-main));
  --color-border: rgb(var(--kodo-steel));
  --color-input: rgb(var(--kodo-steel));
  --color-ring: rgb(var(--kodo-cyan));
  --radius: 0.75rem;

  /* === KŌDŌ DESIGN SYSTEM - SPECTRE ASTRAL PALETTE === */
  /* Core Backgrounds */
  --kodo-void: 11 12 16;
  /* #0B0C10 Nadir Black */
  --kodo-ink: 23 25 35;
  /* Darker Blue-Grey for panels */
  --kodo-graphite: 31 40 51;
  /* #1F2833 Graphite Blue */
  --kodo-slate: 44 54 67;
  /* Surface Elevated */
  --kodo-steel: 59 69 84;
  /* Borders */

  /* Accents */
  --kodo-cyan: 102 252 241;
  /* #66FCF1 Spectral Cyan */
  --kodo-cyan-dim: 69 162 158;
  /* #45A29E Anodized Turquoise */
  --kodo-magenta: 138 126 164;
  /* #8A7EA4 Astral Lavender */
  --kodo-orange: 230 184 156;
  /* #E6B89C Soft Ember */

  /* Utility Colors */
  --kodo-lime: 54 229 209;
  /* Muted Teal/Green for Success */
  --kodo-gold: 234 179 8;
  /* Refined Gold */
  --kodo-red: 230 57 70;
  /* #E63946 Error */

  /* Text */
  --kodo-text-main: 243 243 224;
  /* #F3F3E0 Quiet Paper */
  --kodo-content-highlight: 255 255 255;
  /* White for dark mode */
  --kodo-content-dim: 156 163 175;
  /* Gray-400 for dark mode */

  /* Kōdō Color Utilities for Tailwind */
  --color-kodo-void: rgb(var(--kodo-void));
  --color-kodo-ink: rgb(var(--kodo-ink));
  --color-kodo-graphite: rgb(var(--kodo-graphite));
  --color-kodo-slate: rgb(var(--kodo-slate));
  --color-kodo-steel: rgb(var(--kodo-steel));
  --color-kodo-cyan: rgb(var(--kodo-cyan));
  --color-kodo-cyan-dim: rgb(var(--kodo-cyan-dim));
  --color-kodo-magenta: rgb(var(--kodo-magenta));
  --color-kodo-lime: rgb(var(--kodo-lime));
  --color-kodo-orange: rgb(var(--kodo-orange));
  --color-kodo-gold: rgb(var(--kodo-gold));
  --color-kodo-red: rgb(var(--kodo-red));
  --color-kodo-primary: rgb(var(--kodo-content-highlight));
  --color-kodo-secondary: rgb(var(--kodo-content-dim));

  /* === V5 VARIABLES === */
  --v5-primary: #667eea;
  --v5-primary-light: #8b9aff;
  --v5-primary-dark: #4a5fc1;
  --v5-secondary: #764ba2;
  --v5-accent: #f093fb;
  --v5-success: #84fab0;
  --v5-warning: #ffecd2;
  --v5-danger: #f5576c;
  --v5-info: #8fd3f4;

  --glass-light: rgba(255, 255, 255, 0.85);
  --glass-dark: rgba(18, 18, 18, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);

  --gradient-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  --gradient-danger: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-aurora: linear-gradient(45deg,
      #ff0080,
      #ff8c00,
      #ffd700,
      #00ced1,
      #8a2be2);

  /* Kōdō Gradients */
  --gradient-neon: linear-gradient(135deg, rgb(var(--kodo-cyan-dim)) 0%, rgb(var(--kodo-cyan)) 100%);
  --gradient-cyber: linear-gradient(135deg, rgba(var(--kodo-cyan), 0.1) 0%, rgba(var(--kodo-magenta), 0.1) 100%);
}

/* Base styles - Kodo dark theme by default */
body {
  background-color: rgb(var(--kodo-void));
  color: rgb(var(--kodo-text-main));
  font-family: 'Inter', sans-serif;
}

/* Dark mode theme variables - Keep for compatibility */
.dark,
[data-theme="dark"] {
  --color-background: rgb(var(--kodo-void));
  --color-foreground: rgb(var(--kodo-text-main));
  --color-card: rgb(var(--kodo-graphite));
  --color-card-foreground: rgb(var(--kodo-text-main));
  --color-popover: rgb(var(--kodo-ink));
  --color-popover-foreground: rgb(var(--kodo-text-main));
  --color-primary: rgb(var(--kodo-cyan));
  --color-primary-foreground: rgb(var(--kodo-void));
  --color-secondary: rgb(var(--kodo-slate));
  --color-secondary-foreground: rgb(var(--kodo-text-main));
  --color-muted: rgb(var(--kodo-steel));
  --color-muted-foreground: rgb(var(--kodo-content-dim));
  --color-accent: rgb(var(--kodo-cyan));
  --color-accent-foreground: rgb(var(--kodo-void));
  --color-destructive: rgb(var(--kodo-red));
  --color-destructive-foreground: rgb(var(--kodo-text-main));
  --color-border: rgb(var(--kodo-steel));
  --color-input: rgb(var(--kodo-steel));
  --color-ring: rgb(var(--kodo-cyan));
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: rgb(var(--kodo-void));
    --color-foreground: rgb(var(--kodo-text-main));
    --color-card: rgb(var(--kodo-graphite));
    --color-card-foreground: rgb(var(--kodo-text-main));
    --color-popover: rgb(var(--kodo-ink));
    --color-popover-foreground: rgb(var(--kodo-text-main));
    --color-primary: rgb(var(--kodo-cyan));
    --color-primary-foreground: rgb(var(--kodo-void));
    --color-secondary: rgb(var(--kodo-slate));
    --color-secondary-foreground: rgb(var(--kodo-text-main));
    --color-muted: rgb(var(--kodo-steel));
    --color-muted-foreground: rgb(var(--kodo-content-dim));
    --color-accent: rgb(var(--kodo-cyan));
    --color-accent-foreground: rgb(var(--kodo-void));
    --color-destructive: rgb(var(--kodo-red));
    --color-destructive-foreground: rgb(var(--kodo-text-main));
    --color-border: rgb(var(--kodo-steel));
    --color-input: rgb(var(--kodo-steel));
    --color-ring: rgb(var(--kodo-cyan));
  }
}

/* === V5 ANIMATIONS === */
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* === KŌDŌ ANIMATIONS === */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--kodo-cyan), 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--kodo-cyan), 0.8), 0 0 30px rgba(var(--kodo-cyan), 0.4);
  }
}

@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
  75% { opacity: 0.95; }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility classes */
.animate-fadeIn {
  animation: fadeIn 0.2s ease-in-out;
}

.animate-scaleIn {
  animation: scaleIn 0.2s ease-in-out;
}

.animate-slideInRight {
  animation: slideInRight 0.3s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}

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

.shadow-neon-cyan {
  box-shadow: 0 0 10px rgba(var(--kodo-cyan), 0.3), 0 0 20px rgba(var(--kodo-cyan), 0.1);
}

.shadow-neon-magenta {
  box-shadow: 0 0 10px rgba(var(--kodo-magenta), 0.3), 0 0 20px rgba(var(--kodo-magenta), 0.1);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgb(var(--kodo-void));
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(var(--kodo-steel));
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--kodo-cyan));
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}