/* Theme: Dark Green */
/* AI-Native Builders - Primary dark theme with green accent */
/* Updated: 2025-12-20 */

:root {
  /* ============================================
     Brand Colors (RGB format for alpha support)
     Usage: rgb(var(--color-primary)) or rgba(var(--color-primary), 0.5)
     ============================================ */
  --color-primary: 64, 203, 52;           /* #40cb34 - vibrant green */
  --color-primary-dark: 53, 168, 43;      /* #35a82b - darker green */
  --color-primary-light: 94, 255, 94;     /* #5eff5e - bright green */
  --color-secondary: 102, 255, 153;       /* #66ff99 - mint green */
  --color-secondary-dark: 64, 203, 102;   /* #40cb66 */
  --color-secondary-light: 153, 255, 187; /* #99ffbb */
  --color-accent: 180, 255, 180;          /* #b4ffb4 - pale green */

  /* ============================================
     Semantic Colors
     ============================================ */
  --color-success: 34, 197, 94;           /* #22c55e */
  --color-error: 220, 38, 38;             /* #dc2626 */
  --color-warning: 245, 158, 11;          /* #f59e0b */
  --color-info: 59, 130, 246;             /* #3b82f6 */

  /* ============================================
     Background & Surface Colors
     ============================================ */
  --color-background: 0, 0, 0;            /* #000000 - pure black */
  --color-background-alt: 5, 5, 5;        /* #050505 - slightly lighter */
  --color-surface: 10, 10, 10;            /* #0a0a0a - cards, panels */
  --color-surface-elevated: 17, 17, 17;   /* #111111 - elevated elements */
  --color-surface-hover: 26, 26, 26;      /* #1a1a1a - hover states */

  /* ============================================
     Text Colors
     ============================================ */
  --color-text: 255, 255, 255;            /* #ffffff - primary text */
  --color-text-secondary: 163, 163, 163;  /* #a3a3a3 - secondary text */
  --color-text-muted: 115, 115, 115;      /* #737373 - muted text */
  --color-text-disabled: 82, 82, 82;      /* #525252 - disabled text */

  /* ============================================
     Border Colors
     ============================================ */
  --color-border: 255, 255, 255;          /* base for rgba borders */
  --color-border-muted: 51, 51, 51;       /* #333333 - subtle borders */
  --color-border-light: 38, 38, 38;       /* #262626 - lighter borders */
  --border-opacity: 0.1;                  /* default border opacity */

  /* ============================================
     Interactive States
     ============================================ */
  --color-focus-ring: 64, 203, 52;        /* matches primary */
  --color-selection-bg: 64, 203, 52;      /* text selection */
  --color-selection-text: 0, 0, 0;        /* text on selection */

  /* ============================================
     Gradients
     ============================================ */
  --gradient-primary: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-secondary)) 100%);
  --gradient-text: linear-gradient(135deg, rgb(var(--color-text)) 0%, rgb(var(--color-secondary)) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(var(--color-surface), 1) 0%, rgba(var(--color-background), 1) 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(var(--color-primary), 0.2) 0%, transparent 70%);
  --gradient-hero: radial-gradient(50% 50% at 50% 50%, rgba(var(--color-primary), 0.15) 0%, transparent 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(var(--color-primary), 0.08) 0deg, rgba(var(--color-secondary), 0.05) 120deg, transparent 240deg);
  --gradient-radial-subtle: radial-gradient(398.67% 100% at 50% 100%, rgba(var(--color-primary), 0.15) 0%, transparent 100%);
  --gradient-cta: linear-gradient(180deg, transparent 0%, rgba(var(--color-primary), 0.05) 100%);

  /* ============================================
     Shadows (dark theme optimized)
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 8px 10px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* Glow shadows */
  --shadow-glow-sm: 0 0 10px rgba(var(--color-primary), 0.2);
  --shadow-glow: 0 0 20px rgba(var(--color-primary), 0.3);
  --shadow-glow-lg: 0 0 40px rgba(var(--color-primary), 0.4);
  --shadow-glow-secondary: 0 0 20px rgba(var(--color-secondary), 0.3);

  /* Button shadows */
  --shadow-button: 0 4px 20px rgba(var(--color-primary), 0.3);
  --shadow-button-hover: 0 6px 30px rgba(var(--color-primary), 0.4);
  --shadow-button-large: 0 6px 30px rgba(var(--color-primary), 0.4);
  --shadow-button-large-hover: 0 10px 40px rgba(var(--color-primary), 0.5);

  /* Card shadows */
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(var(--color-primary), 0.1);

  /* ============================================
     Overlay Colors
     ============================================ */
  --color-overlay: 0, 0, 0;
  --overlay-opacity-light: 0.5;
  --overlay-opacity-medium: 0.7;
  --overlay-opacity-heavy: 0.85;

  /* ============================================
     Scrollbar Colors
     ============================================ */
  --scrollbar-track: rgb(var(--color-surface));
  --scrollbar-thumb: rgba(var(--color-primary), 0.3);
  --scrollbar-thumb-hover: rgba(var(--color-primary), 0.5);

  /* ============================================
     Code/Syntax Highlighting
     ============================================ */
  --color-code-bg: 30, 30, 30;
  --color-code-text: 212, 212, 212;
  --color-code-keyword: 86, 156, 214;
  --color-code-string: 206, 145, 120;
  --color-code-comment: 106, 153, 85;
  --color-code-function: 220, 220, 170;

  /* ============================================
     Form Colors
     ============================================ */
  --color-input-bg: 17, 17, 17;
  --color-input-border: 51, 51, 51;
  --color-input-focus-border: var(--color-primary);
  --color-input-placeholder: 115, 115, 115;
  --color-input-disabled-bg: 26, 26, 26;

  /* ============================================
     Link Action Color (for dashboard/admin links)
     ============================================ */
  --color-action: 90, 93, 205;            /* #5a5dcd - purple action links */
}

/* ============================================
   Dark theme utility classes
   ============================================ */

/* Text selection styling */
::selection {
  background: rgba(var(--color-selection-bg), 0.3);
  color: rgb(var(--color-text));
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

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