opsxsql/frontend/src/index.css

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

@layer base {
  :root {
    /* ===== Dark Theme (default) ===== */
    --background: 220 13% 5%;
    --foreground: 210 40% 98%;
    --card: 220 13% 7%;
    --card-foreground: 210 40% 98%;
    --popover: 220 13% 7%;
    --popover-foreground: 210 40% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 13% 14%;
    --secondary-foreground: 210 40% 98%;
    --muted: 220 13% 14%;
    --muted-foreground: 215 20% 55%;
    --accent: 220 13% 14%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 18%;
    --input: 220 13% 14%;
    --ring: 217 91% 60%;
    --radius: 0.625rem;
    --sidebar-background: 220 13% 7%;
    --sidebar-foreground: 210 40% 90%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 13% 14%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 220 13% 18%;
    --sidebar-ring: 217 91% 60%;

    --dg-bg-primary: #0d1117;
    --dg-bg-secondary: #161b22;
    --dg-bg-tertiary: #21262d;
    --dg-bg-hover: #30363d;
    --dg-border: #30363d;
    --dg-border-light: #21262d;
    --dg-text-primary: #f0f6fc;
    --dg-text-secondary: #8b949e;
    --dg-text-muted: #6e7681;
    --dg-blue: #58a6ff;
    --dg-green: #3fb950;
    --dg-red: #f85149;
    --dg-orange: #f0883e;
    --dg-purple: #8957e5;
    --dg-cyan: #39c5cf;
    --dg-yellow: #d29922;

    --dg-card-hover-border: rgba(88, 166, 255, 0.5);
    --dg-gradient-start: #2563eb;
    --dg-gradient-end: #9333ea;
    --dg-gradient-text-start: #60a5fa;
    --dg-gradient-text-end: #c084fc;
    --dg-input-focus-ring: rgba(96, 165, 250, 0.2);
  }

  [data-theme="light"] {
    /* ===== Light Theme ===== */
    --background: 0 0% 100%;
    --foreground: 220 14% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 14% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 14% 10%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 14% 96%;
    --secondary-foreground: 220 14% 10%;
    --muted: 220 14% 96%;
    --muted-foreground: 220 10% 46%;
    --accent: 220 14% 96%;
    --accent-foreground: 220 14% 10%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 217 91% 60%;
    --radius: 0.625rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 220 14% 20%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 94%;
    --sidebar-accent-foreground: 220 14% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217 91% 60%;

    --dg-bg-primary: #ffffff;
    --dg-bg-secondary: #f8f9fb;
    --dg-bg-tertiary: #f0f1f5;
    --dg-bg-hover: #e8eaef;
    --dg-border: #e2e5eb;
    --dg-border-light: #eaecf0;
    --dg-text-primary: #1a1d23;
    --dg-text-secondary: #5c6370;
    --dg-text-muted: #9ca3af;
    --dg-blue: #2563eb;
    --dg-green: #16a34a;
    --dg-red: #dc2626;
    --dg-orange: #ea580c;
    --dg-purple: #7c3aed;
    --dg-cyan: #0891b2;
    --dg-yellow: #ca8a04;

    --dg-card-hover-border: rgba(37, 99, 235, 0.3);
    --dg-gradient-start: #2563eb;
    --dg-gradient-end: #7c3aed;
    --dg-gradient-text-start: #1d4ed8;
    --dg-gradient-text-end: #6d28d9;
    --dg-input-focus-ring: rgba(37, 99, 235, 0.15);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] antialiased;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  code, pre, .font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  }
}

@layer utilities {
  .dg-card {
    @apply bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .dg-card-hover {
    @apply transition-all duration-300 hover:-translate-y-0.5;
  }
  .dg-card-hover:hover {
    border-color: var(--dg-card-hover-border);
  }
  .dg-input {
    @apply bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] focus:border-[var(--dg-blue)] focus:ring-1;
  }
  .dg-input:focus {
    --tw-ring-color: var(--dg-input-focus-ring);
  }
  .dg-text-muted {
    color: var(--dg-text-muted);
  }
  .dg-text-secondary {
    color: var(--dg-text-secondary);
  }
  .dg-gradient-text {
    background: linear-gradient(to right, var(--dg-gradient-text-start), var(--dg-gradient-text-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .dg-gradient-bg {
    background: linear-gradient(to right, var(--dg-gradient-start), var(--dg-gradient-end));
  }
  .dg-gradient-br {
    background: linear-gradient(to bottom right, var(--dg-gradient-start), var(--dg-gradient-end));
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--dg-border);
    border-radius: 2px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--dg-text-muted);
  }
  [data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #d1d5db;
  }
  [data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
}

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