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

@layer base {
  :root {
    /* Explicit color scheme declaration for better monitor compatibility */
    color-scheme: light;
    /* Light mode (fallback) */
    --background: 0 0% 100%;
    --foreground: 0 0% 10%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 15%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 10%;
    --destructive: 0 0% 20%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 0%;
    --overlay: 0 0% 0%;
    --radius: 6px;
  }

  .dark {
    /* Explicit dark color scheme for better monitor compatibility */
    color-scheme: dark;
    /* Enhanced dark theme with sophisticated gradients and better depth */
    --background: 0 0% 2%;
    --foreground: 0 0% 98%;
    --card: 0 0% 4%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 98%;
    --primary: 210 100% 70%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 85%;
    --muted: 0 0% 14%;
    --muted-foreground: 0 0% 65%;
    --accent: 210 50% 15%;
    --accent-foreground: 210 100% 90%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 85% 97%;
    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 210 100% 70%;
    --overlay: 0 0% 0%;
    --gradient-primary: linear-gradient(135deg, hsl(210 100% 70%) 0%, hsl(220 100% 75%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 10%) 0%, hsl(0 0% 14%) 100%);
  }

  /* Geist-specific variables */
  :root {
    --geist-gray: 0 0% 50%;
    --geist-gray-light: 0 0% 65%;
    --geist-gray-dark: 0 0% 40%;
    --geist-success: 0 0% 35%;
    --geist-error: 0 0% 35%;
    --geist-warning: 0 0% 35%;
  }

  .dark {
    --geist-gray: 0 0% 65%;
    --geist-gray-light: 0 0% 82%;
    --geist-gray-dark: 0 0% 45%;
  }
}

@layer base {
  
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  /* Ultra compact scrollbars */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 9999px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground));
  }
  
  /* Remove scrollbar gutter */
  html {
    scrollbar-gutter: stable;
  }
  
  /* Enhanced focus styles */
  .focus-visible\:ring-primary:focus-visible {
    --tw-ring-color: hsl(var(--primary));
  }
  
  /* Enhanced transitions for interactive elements */
  button, input, select, textarea, [role="button"] {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
  
  /* Micro-interactions for buttons */
  button:active:not(:disabled), [role="button"]:active {
    transform: translateY(0.5px);
    transition-duration: 100ms;
  }
  
  /* Gentle scale animation for interactive cards */
  .interactive-card {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .interactive-card:hover {
    transform: translateY(-1px);
  }
  
  /* Enhanced focus rings */
  .focus-ring {
    transition: all 200ms ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  .focus-ring:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
  
  /* Enhanced hover states and shadows */
  .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
  
  /* Enhanced shadow variations */
  .shadow-elegant {
    box-shadow: 
      0 1px 3px 0 rgb(0 0 0 / 0.1),
      0 1px 2px -1px rgb(0 0 0 / 0.1),
      0 0 0 1px rgb(255 255 255 / 0.05);
  }
  
  .dark .shadow-elegant {
    box-shadow: 
      0 1px 3px 0 rgb(0 0 0 / 0.3),
      0 1px 2px -1px rgb(0 0 0 / 0.2),
      0 0 0 1px rgb(255 255 255 / 0.1);
  }
  
  .shadow-elevated {
    box-shadow: 
      0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(0 0 0 / 0.1),
      0 0 0 1px rgb(0 0 0 / 0.05);
  }
  
  .dark .shadow-elevated {
    box-shadow: 
      0 10px 15px -3px rgb(0 0 0 / 0.3),
      0 4px 6px -4px rgb(0 0 0 / 0.2),
      0 0 0 1px rgb(255 255 255 / 0.1);
  }
  
  /* Improved text rendering */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Graph edges follow theme foreground for consistency */
  .react-flow__edge-path {
    stroke: hsl(var(--foreground) / 0.6) !important;
  }
  
  .react-flow__edge-path:hover {
    stroke: hsl(var(--foreground) / 0.9) !important;
  }

  /* Ensure drawer always appears above ReactFlow */
  .react-flow {
    z-index: 1 !important;
  }
  
  .react-flow__renderer {
    z-index: 1 !important;
  }
  
  .react-flow__container {
    z-index: 1 !important;
  }
  
  /* Loading animation */
  @keyframes shimmer {
    0% {
      background-position: -200px 0;
    }
    100% {
      background-position: calc(200px + 100%) 0;
    }
  }
  
  .shimmer {
    animation: shimmer 2s ease-in-out infinite;
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 25%,
      hsl(var(--muted-foreground) / 0.1) 50%,
      hsl(var(--muted)) 75%
    );
    background-size: 200px 100%;
  }
  
  /* Enhanced ReactFlow styling */
  .react-flow__node {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1));
  }
  
  .react-flow__controls {
    background: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  }
  
  .react-flow__controls-button {
    background: transparent !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
  }
  
  .react-flow__controls-button:hover {
    background: hsl(var(--accent)) !important;
  }
  
  .react-flow__controls-button:last-child {
    border-bottom: none !important;
  }
  
  /* Pulse animation for loading states */
  @keyframes pulse-soft {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  
  .pulse-soft {
    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}
