/* Theme: Light Purple */
/* AI-Native Builders - Light theme with purple 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: 109, 40, 217;          /* #6d28d9 - purple */
  --color-primary-dark: 91, 33, 182;      /* #5b21b6 - darker purple */
  --color-primary-light: 139, 92, 246;    /* #8b5cf6 - lighter purple */
  --color-secondary: 167, 139, 250;       /* #a78bfa - light violet */
  --color-secondary-dark: 124, 58, 237;   /* #7c3aed */
  --color-secondary-light: 196, 181, 253; /* #c4b5fd */
  --color-accent: 221, 214, 254;          /* #ddd6fe - pale violet */

  /* ============================================
     Semantic Colors
     ============================================ */
  --color-success: 22, 163, 74;           /* #16a34a */
  --color-error: 220, 38, 38;             /* #dc2626 */
  --color-warning: 217, 119, 6;           /* #d97706 */
  --color-info: 37, 99, 235;              /* #2563eb */

  /* ============================================
     Background & Surface Colors
     ============================================ */
  --color-background: 255, 255, 255;      /* #ffffff - pure white */
  --color-background-alt: 249, 250, 251;  /* #f9fafb - slightly gray */
  --color-surface: 243, 244, 246;         /* #f3f4f6 - cards, panels */
  --color-surface-elevated: 229, 231, 235; /* #e5e7eb - elevated elements */
  --color-surface-hover: 209, 213, 219;   /* #d1d5db - hover states */

  /* ============================================
     Text Colors
     ============================================ */
  --color-text: 17, 24, 39;               /* #111827 - primary text */
  --color-text-secondary: 75, 85, 99;     /* #4b5563 - secondary text */
  --color-text-muted: 156, 163, 175;      /* #9ca3af - muted text */
  --color-text-disabled: 209, 213, 219;   /* #d1d5db - disabled text */

  /* ============================================
     Border Colors
     ============================================ */
  --color-border: 0, 0, 0;                /* base for rgba borders */
  --color-border-muted: 229, 231, 235;    /* #e5e7eb - subtle borders */
  --color-border-light: 243, 244, 246;    /* #f3f4f6 - lighter borders */
  --border-opacity: 0.1;                  /* default border opacity */

  /* ============================================
     Interactive States
     ============================================ */
  --color-focus-ring: 109, 40, 217;       /* matches primary */
  --color-selection-bg: 109, 40, 217;     /* text selection */
  --color-selection-text: 255, 255, 255;  /* 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-primary)) 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.1) 0%, transparent 70%);
  --gradient-hero: radial-gradient(50% 50% at 50% 50%, rgba(var(--color-primary), 0.08) 0%, transparent 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(var(--color-primary), 0.05) 0deg, rgba(var(--color-secondary), 0.03) 120deg, transparent 240deg);
  --gradient-radial-subtle: radial-gradient(398.67% 100% at 50% 100%, rgba(var(--color-primary), 0.08) 0%, transparent 100%);
  --gradient-cta: linear-gradient(180deg, transparent 0%, rgba(var(--color-primary), 0.03) 100%);

  /* ============================================
     Shadows (light theme optimized)
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

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

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

  /* Card shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--color-primary), 0.08);

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

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

  /* ============================================
     Code/Syntax Highlighting (light theme)
     ============================================ */
  --color-code-bg: 243, 244, 246;
  --color-code-text: 17, 24, 39;
  --color-code-keyword: 124, 58, 237;
  --color-code-string: 5, 150, 105;
  --color-code-comment: 107, 114, 128;
  --color-code-function: 217, 119, 6;

  /* ============================================
     Form Colors
     ============================================ */
  --color-input-bg: 255, 255, 255;
  --color-input-border: 209, 213, 219;
  --color-input-focus-border: var(--color-primary);
  --color-input-placeholder: 156, 163, 175;
  --color-input-disabled-bg: 243, 244, 246;

  /* ============================================
     Link Action Color
     ============================================ */
  --color-action: 109, 40, 217;           /* matches primary for light theme */
}

/* ============================================
   Light theme utility classes
   ============================================ */

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

/* Custom scrollbar for light 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);
}

/* Override body grain texture for light theme */
body::after {
  opacity: 0.015;
}