/* SimpleDotNet.com - Theme CSS */
/* Custom CSS variables for dark blue/gray theme */

:root {
  /* Primary Colors */
  --primary-dark: #0a192f;
  --primary-medium: #112240;
  --primary-light: #233554;

  /* Accent Colors */
  --accent-blue: #64ffda;
  --accent-blue-light: #88ffdf;
  --accent-blue-dark: #52d1b2;

  /* Neutral Colors */
  --text-primary: #e6f1ff;
  --text-secondary: #a8b2d1;
  --text-muted: #8892b0;

  --border-color: #2d3a5c;
  --divider-color: #1e2a47;

  --card-bg: #112240;
  --card-border: #233554;

  /* Semantic Colors */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;

  /* Font Sizes (rem) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing System (8px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Component Design Tokens */
  --btn-primary-bg: var(--accent-blue);
  --btn-primary-text: var(--primary-dark);
  --btn-primary-hover: var(--accent-blue-light);

  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--accent-blue);
  --btn-secondary-border: var(--accent-blue);

  --card-radius: 0.5rem;
  --card-padding: var(--space-6);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  --nav-bg: var(--primary-dark);
  --nav-text: var(--text-primary);
  --nav-hover: var(--primary-light);
  --nav-active: var(--accent-blue);

  /* Code Blocks */
  --code-bg: #1a1a2e;
  --code-text: #f8f8f2;
  --code-comment: #6272a4;
  --code-keyword: #ff79c6;
  --code-string: #f1fa8c;
  --code-number: #bd93f9;
}

/* Bootstrap Customization */
:root {
  --bs-body-bg: var(--primary-dark);
  --bs-body-color: var(--text-primary);
  --bs-primary: var(--accent-blue);
  --bs-secondary: var(--text-secondary);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--card-bg);
  --bs-card-border-color: var(--card-border);
  --bs-link-color: var(--accent-blue);
  --bs-link-hover-color: var(--accent-blue-light);
  --bs-border-radius: var(--card-radius);
}

/* Base Styles */
body {
  font-family: var(--font-sans);
  background-color: var(--primary-dark);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Custom Utility Classes */
.bg-primary-dark {
  background-color: var(--primary-dark) !important;
}

.bg-primary-medium {
  background-color: var(--primary-medium) !important;
}

.bg-primary-light {
  background-color: var(--primary-light) !important;
}

.text-accent {
  color: var(--accent-blue) !important;
}

.border-accent {
  border-color: var(--accent-blue) !important;
}

/* Card Styles */
.card-developer {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-developer:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Button Customization */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
}

.btn-outline-primary {
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--accent-blue);
  color: var(--primary-dark);
  border-color: var(--accent-blue);
}

/* Navigation */
.navbar {
  background-color: var(--nav-bg) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--nav-text);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--nav-hover);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--nav-active);
}

/* Code Blocks */
pre, code {
  font-family: var(--font-mono);
  background-color: var(--code-bg);
  color: var(--code-text);
  border-radius: 0.25rem;
}

pre {
  padding: var(--space-4);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

code {
  padding: 0.2em 0.4em;
  font-size: 0.9em;
}

/* Accessibility */
:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --card-padding: var(--space-4);
  }
  
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}