html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Lucide-inspired Color Palette */
:root {
  /* Background Colors */
  --color-background: #1b1b1f;
  --color-background-alt: #161618;
  --color-background-elevated: #202127;
  --color-background-soft: #202127;
  --color-background-up: #1b1b1d;
  --color-background-down: #0f0f10;

  /* Brand/Primary Colors */
  --color-primary: #f56565;
  --color-primary-light: #f67373;
  --color-primary-lighter: #f89191;
  --color-primary-dark: #dc5a5a;
  --color-primary-darker: #c45050;

  /* Accent Colors */
  --color-accent-green: #85e89d;
  --color-accent-blue: #79b8ff;
  --color-accent-purple: #b392f0;
  --color-accent-cyan: #9ecbff;
  --color-accent-orange: #f78c6c;

  /* Text Colors */
  --color-text-primary: #e1e4e8;
  --color-text-secondary: #6a737d;
  --color-text-muted: rgba(235, 235, 245, 0.6);
  --color-text-faint: rgba(235, 235, 245, 0.16);

  /* Border Colors */
  --color-border: rgba(235, 235, 245, 0.16);
  --color-border-subtle: rgba(245, 101, 101, 0.2);
  --color-border-hover: rgba(245, 101, 101, 0.4);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Base Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-background);
  color: var(--color-text-primary);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Enhanced Focus States */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.5);
  outline: none;
}

/* Typography Classes */
.font-display {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
}

/* Modern Button Styles */
.btn-primary-modern {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary-modern:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-primary-accent {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary-accent:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: white;
}

/* Card Styles */
.card-modern {
  background: var(--color-background-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.card-modern:hover {
  border-color: var(--color-border-subtle);
}

/* Glass Effect */
.glass-effect {
  background: rgba(32, 33, 39, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
}

/* Surface Colors */
.surface {
  background: var(--color-background-elevated);
}

.surface-soft {
  background: var(--color-background-soft);
}

.surface-alt {
  background: var(--color-background-alt);
}

/* Accent Colors */
.text-accent-green {
  color: var(--color-accent-green);
}

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

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

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

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

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle);
  border-radius: 3px;
}

/* Selection */
::selection {
  background: rgba(245, 101, 101, 0.3);
  color: var(--color-text-primary);
}

/* Focus visible */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Image optimization */
img {
  max-width: 100%;
  height: auto;
  image-rendering: high-quality;
}