/*
 * SparkPy.net Master Theme
 * Central color scheme and design variables for the entire application
 * Edit this file to change the look across all pages
 */

:root {
  /* ===== BRAND COLORS ===== */
  --primary-color: #667eea;
  --primary-dark: #764ba2;
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  --accent-color: #04b0ee;
  --accent-bright: #4ecdc4;
  --accent-secondary: #44a08d;
  --accent-pink: #f5576c;

  /* Purple/Emerald theme (task intro) */
  --purple-primary: #a855f7;
  --purple-light: #c084fc;
  --emerald-primary: #10b981;
  --gradient-purple-emerald: linear-gradient(135deg, #a855f7, #10b981);

  /* ===== BACKGROUND COLORS ===== */
  --background-dark: #000000;
  --background-medium: #1c1b29;
  --background-light: #f8f9fa;
  --background-card: #ffffff;
  --background-card-dark: #3f3f46;

  /* Main page grey scheme */
  --grey-dark: #18181b;
  --grey-medium: #27272a;
  --grey-border: #3f3f46;
  --grey-border-light: #52525b;
  --grey-text: #a1a1aa;

  /* ===== TEXT COLORS ===== */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-dark: #333333;
  --text-gray: #666666;
  --text-muted: #999999;

  /* ===== UI ELEMENTS ===== */
  --border-color: rgb(53, 141, 185);
  --border-light: #52525b;
  --border-medium: #3f3f46;
  --border-thickness: 2px;

  /* ===== STATUS COLORS ===== */
  --success-color: #73AF55;
  --error-color: #D06079;
  --warning-color: #ff6b6b;
  --info-color: #4facfe;

  /* ===== EDITOR COLORS ===== */
  --editor-background: #2d3748;
  --editor-text: #e2e8f0;
  --editor-border: #e2e8f0;
  --console-background: #1a202c;
  --console-text:#00ff41;  /* Neon green console output text */
  --code-yellow: #fbbf24;

  /* ===== SPACING ===== */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-round: 50px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== TYPOGRAPHY ===== */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-mono: 'Courier New', monospace;
  --font-family-sparkpy: 'Poppins', sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  /* ===== Z-INDEX LAYERS ===== */
  --z-background: 1;
  --z-content: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-tooltip: 2000;
}

/* ===== UTILITY CLASSES ===== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-dark { color: var(--text-dark); }

.bg-dark { background-color: var(--background-dark); }
.bg-medium { background-color: var(--background-medium); }
.bg-light { background-color: var(--background-light); }

.border-accent { border-color: var(--accent-color); }
.border-primary { border-color: var(--primary-color); }

/* ===== COMPONENT DEFAULTS ===== */
button, .btn {
  font-family: var(--font-family);
  transition: var(--transition-normal);
}

input, textarea, select {
  font-family: var(--font-family);
  border-radius: var(--radius-sm);
}