veza/apps/web/src/index.css

@import 'tailwindcss';
@import './styles/design-tokens.css';

/* === SMOOTH THEME TRANSITIONS === */
* {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

@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: 255 255 255;
  /* #FFFFFF White - Action 11.1.1.1: Changed to white for better contrast */
  --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));

  /* === Z-INDEX SCALE === */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;

  /* === 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%
  );
  --gradient-astral: linear-gradient(to bottom, #0b0e11, #131720, #0b0e11);

  /* HUD Utilities */
  --hud-border-cyan: 1px solid rgba(var(--kodo-cyan), 0.2);
  --hud-glow-cyan: 0 0 15px rgba(var(--kodo-cyan), 0.15);
}

/* Base styles - Kodo dark theme by default */
:root {
  color-scheme: dark;
}

html {
  background-color: rgb(var(--kodo-void));
}

body {
  background-color: rgb(var(--kodo-void)) !important;
  color: rgb(var(--kodo-text-main)) !important;
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

/* === LIGHT MODE === */
/* Note: Light mode désactivé par défaut - utiliser uniquement si explicitement activé */
html:not(.dark):not([data-theme='dark']) .light,
html:not(.dark):not([data-theme='dark']) [data-theme='light'] {
  /* Light backgrounds */
  --kodo-void: 250 250 252;
  /* #FAFAFC Almost white */
  --kodo-ink: 245 245 247;
  /* #F5F5F7 Light grey */
  --kodo-graphite: 240 240 243;
  /* #F0F0F3 Soft grey */
  --kodo-slate: 235 235 238;
  /* #EBEBEE Light surface */
  --kodo-steel: 220 220 225;
  /* #DCDCE1 Borders */

  /* Light mode text */
  --kodo-text-main: 30 30 35;
  /* #1E1E23 Dark text */
  --kodo-content-highlight: 0 0 0;
  /* Black */
  --kodo-content-dim: 100 100 110;
  /* #64646E Muted text */

  /* Adjust accents for light mode (keep vibrant) */
  --kodo-cyan: 0 180 216;
  /* Darker cyan for contrast */
  --kodo-cyan-dim: 0 150 180;
  /* Darker dim cyan */
  --kodo-magenta: 120 80 150;
  /* Darker magenta */
  --kodo-lime: 80 200 120;
  /* Darker lime */
  --kodo-red: 220 38 38;
  /* Darker red */

  /* Light mode specific */
  --glass-light: rgba(255, 255, 255, 0.95);
  --glass-dark: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
}

/* 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));
}

/* === THEME VARIANTS === */
/* Cyber Theme (Default) - Cyan/Magenta */
[data-color-theme='cyber'],
:root {
  --theme-primary: var(--kodo-cyan);
  --theme-accent: var(--kodo-magenta);
  --theme-success: var(--kodo-lime);
  --theme-warning: var(--kodo-gold);
  --theme-error: var(--kodo-red);
}

/* Ocean Theme - Blue/Teal */
[data-color-theme='ocean'] {
  --kodo-cyan: 14 165 233;
  /* Sky blue #0EA5E9 */
  --kodo-cyan-dim: 6 182 212;
  /* Cyan #06B6D4 */
  --kodo-magenta: 59 130 246;
  /* Blue #3B82F6 */
  --kodo-lime: 16 185 129;
  /* Emerald #10B981 */
  --kodo-gold: 245 158 11;
  /* Amber #F59E0B */
  --theme-primary: 14 165 233;
  --theme-accent: 6 182 212;
}

/* Forest Theme - Green/Lime */
[data-color-theme='forest'] {
  --kodo-cyan: 34 197 94;
  /* Green #22C55E */
  --kodo-cyan-dim: 132 204 22;
  /* Lime #84CC16 */
  --kodo-magenta: 74 222 128;
  /* Light green #4ADE80 */
  --kodo-lime: 16 185 129;
  /* Emerald #10B981 */
  --kodo-gold: 234 179 8;
  /* Yellow #EAB308 */
  --theme-primary: 34 197 94;
  --theme-accent: 132 204 22;
}

/* Sunset Theme - Orange/Purple */
[data-color-theme='sunset'] {
  --kodo-cyan: 249 115 22;
  /* Orange #F97316 */
  --kodo-cyan-dim: 251 146 60;
  /* Light orange #FB923C */
  --kodo-magenta: 168 85 247;
  /* Purple #A855F7 */
  --kodo-lime: 20 184 166;
  /* Teal #14B8A6 */
  --kodo-gold: 251 191 36;
  /* Amber #FBBF24 */
  --kodo-red: 244 63 94;
  /* Rose #F43F5E */
  --theme-primary: 249 115 22;
  --theme-accent: 168 85 247;
}

@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%;
  }
}

/* === PREMIUM ANIMATIONS === */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

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

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(102, 252, 241, 0.3);
  }

  50% {
    box-shadow: 0 0 40px rgba(102, 252, 241, 0.6);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

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

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

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

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-in {
  from {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@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;
}

/* === PREMIUM HUD UTILITIES === */
/* === ENHANCED HUD STYLES === */
.glass-hud {
  @apply bg-kodo-void/40 backdrop-blur-2xl border border-white/5 shadow-2xl;
  background-image:
    linear-gradient(to bottom right, rgba(255, 255, 255, 0.03), transparent),
    radial-gradient(
      circle at top right,
      rgba(102, 252, 241, 0.05),
      transparent 50%
    );
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.light .glass-hud {
  @apply bg-white/80 backdrop-blur-2xl border border-black/5;
  background-image:
    linear-gradient(to bottom right, rgba(0, 0, 0, 0.02), transparent),
    radial-gradient(
      circle at top right,
      rgba(102, 252, 241, 0.08),
      transparent 50%
    );
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.glass-hud-active {
  @apply bg-kodo-cyan/5 border-kodo-cyan/30;
  box-shadow:
    0 0 20px rgba(102, 252, 241, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(102, 252, 241, 0.1);
}

.light .glass-hud-active {
  @apply bg-kodo-cyan/10 border-kodo-cyan/40;
  box-shadow:
    0 0 20px rgba(0, 180, 216, 0.15),
    0 4px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(0, 180, 216, 0.2);
}

.hud-corner {
  @apply relative;
}

.hud-corner::before {
  content: '';
  @apply absolute -top-px -left-px w-2 h-2 border-t border-l border-kodo-cyan opacity-40 rounded-tl-sm;
}

.hud-corner::after {
  content: '';
  @apply absolute -bottom-px -right-px w-2 h-2 border-b border-r border-kodo-cyan opacity-40 rounded-br-sm;
}

.text-hud {
  @apply font-mono uppercase tracking-[0.2em] text-[10px] font-bold opacity-60;
}

.animate-scan {
  position: relative;
  overflow: hidden;
}

.animate-scan::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--kodo-cyan), 0.05),
    transparent
  );
  animation: scan 4s linear infinite;
}

@keyframes scan {
  from {
    top: -100%;
  }

  to {
    top: 200%;
  }
}

.liquid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--gradient-astral);
  overflow: hidden;
}

.liquid-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  mix-blend-mode: screen;
  animation: float-blob 20s ease-in-out infinite alternate;
}

@keyframes float-blob {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(10%, 10%) scale(1.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;
}