/* 
 * Microframework CSS (BEM-based) - Rodrigo Faustino
 * Zero-Dependency, High-Performance, Theme-Aware
 */

:root {
  /* Day Theme (Default) */
  --bem-primary: #4f46e5;
  --bem-secondary: #d946ef;
  --bem-success: #10b981;
  --bem-danger: #ef4444;
  --bem-warning: #f59e0b;
  --bem-dark: #0f172a;
  --bem-light: #f8fafc;
  --bem-bg: #f8fafc;
  --bem-surface: #ffffff;
  --bem-text: #0f172a;
  --bem-text-muted: #64748b;
  --bem-border: #e2e8f0;
  --bem-header-bg: rgba(255, 255, 255, 0.9);
  
  --bem-spacing-xs: .25rem;
  --bem-spacing-sm: .5rem;
  --bem-spacing-md: 1rem;
  --bem-spacing-lg: 1.5rem;
  --bem-spacing-xl: 2rem;
  --bem-spacing-xxl: 3rem;
  
  --bem-font-base: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bem-font-mono: 'Courier New', monospace;
  
  --bem-radius-sm: .375rem;
  --bem-radius-md: .75rem;
  --bem-radius-lg: 1rem;
  --bem-radius-xl: 1.5rem;
  --bem-radius-full: 9999px;
  
  --bem-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --bem-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
  --bem-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --bem-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1);
  
  --bem-transition: all 0.3s ease;
  --bem-transition-slow: all 0.8s ease;
}

[class="sunset"], [data-theme="sunset"] {
  --bem-primary: #ea580c;
  --bem-secondary: #dc2626;
  --bem-bg: #fffaf0;
  --bem-surface: #ffffff;
  --bem-text: #2d0a01;
  --bem-text-muted: #9a3412;
  --bem-border: #fed7aa;
  --bem-header-bg: rgba(255, 250, 240, 0.9);
  --bem-light: #ffedd5;
}

[class="night"], [data-theme="night"] {
  --bem-primary: #6366f1;
  --bem-secondary: #a855f7;
  --bem-bg: #020617;
  --bem-surface: #0f172a;
  --bem-text: #f1f5f9;
  --bem-text-muted: #94a3b8;
  --bem-border: #1e293b;
  --bem-header-bg: rgba(2, 6, 23, 0.9);
  --bem-light: #1e293b;
}

/* Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--bem-font-base);
  line-height: 1.5;
  color: var(--bem-text);
  background-color: var(--bem-bg);
  transition: var(--bem-transition-slow);
  -webkit-font-smoothing: antialiased;
}

/* Layout Blocks */
.bem-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--bem-spacing-md);
}
.bem-section {
  position: relative;
  transition: background-color var(--bem-transition-slow);
}
.bem-section--full-h { min-height: 90vh; display: flex; align-items: center; }

.bem-flex { display: flex; }
.bem-flex-col { flex-direction: column; }
.bem-flex-wrap { flex-wrap: wrap; }
.bem-items-center { align-items: center; }
.bem-justify-center { justify-content: center; }
.bem-justify-between { justify-content: space-between; }
.bem-gap-xs { gap: var(--bem-spacing-xs); }
.bem-gap-sm { gap: var(--bem-spacing-sm); }
.bem-gap-md { gap: var(--bem-spacing-md); }
.bem-gap-lg { gap: var(--bem-spacing-lg); }

.bem-grid { display: grid; gap: var(--bem-spacing-md); }
.bem-grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.bem-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bem-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bem-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Buttons */
.bem-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: var(--bem-radius-full);
  cursor: pointer;
  transition: var(--bem-transition);
  text-decoration: none;
  gap: var(--bem-spacing-sm);
  border: none;
}
.bem-btn:hover { transform: scale(1.05); }
.bem-btn:active { transform: scale(0.95); }
.bem-btn--primary { background: var(--bem-primary); color: #fff; box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2); }
.bem-btn--secondary { background: var(--bem-secondary); color: #fff; }
.bem-btn--outline { background: transparent; border: 1px solid var(--bem-border); color: var(--bem-text); }
.bem-btn--outline:hover { border-color: var(--bem-primary); color: var(--bem-primary); }
.bem-btn--glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); color: inherit; }

/* Cards */
.bem-card {
  background-color: var(--bem-surface);
  border-radius: var(--bem-radius-xl);
  border: 1px solid var(--bem-border);
  padding: var(--bem-spacing-xl);
  transition: var(--bem-transition);
  position: relative;
  overflow: hidden;
}
.bem-card--hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--bem-shadow-xl);
  border-color: var(--bem-primary);
}
.bem-card__icon {
  width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--bem-radius-lg);
  margin-bottom: var(--bem-spacing-lg);
  color: var(--bem-primary);
}
.bem-card__title { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--bem-spacing-sm); letter-spacing: -0.025em; }
.bem-card__text { font-size: 0.9375rem; color: var(--bem-text-muted); line-height: 1.6; }

/* Navbar */
.bem-navbar {
  position: fixed; top: 0; left: 0; right: 0;
  background-color: var(--bem-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bem-border);
  z-index: 1000;
  height: 5rem;
  display: flex; align-items: center;
  transition: var(--bem-transition);
}
.bem-navbar__container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--bem-spacing-lg); }
.bem-navbar__brand { font-size: 1.25rem; font-weight: 900; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 0.75rem; }
.bem-navbar__menu { display: flex; gap: var(--bem-spacing-xl); list-style: none; align-items: center; }
.bem-navbar__link { text-decoration: none; color: var(--bem-text-muted); font-size: 0.9375rem; font-weight: 500; transition: var(--bem-transition); }
.bem-navbar__link:hover { color: var(--bem-primary); }
.bem-navbar__link--active { color: var(--bem-primary); font-weight: 700; }

/* Form */
.bem-form { display: flex; flex-direction: column; gap: var(--bem-spacing-lg); }
.bem-form__group { display: flex; flex-direction: column; gap: var(--bem-spacing-xs); }
.bem-form__label { font-weight: 600; font-size: 0.875rem; color: var(--bem-text); }
.bem-form__input {
  width: 100%; padding: 1rem;
  background: var(--bem-light);
  border: 1px solid var(--bem-border);
  border-radius: var(--bem-radius-md);
  color: var(--bem-text); font-family: inherit;
  transition: var(--bem-transition);
}
.bem-form__input:focus { outline: none; border-color: var(--bem-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }

/* Typography Extras */
.bem-h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.05em; }
.bem-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.bem-text-lg { font-size: 1.25rem; }
.bem-text-center { text-align: center; }
.bem-font-bold { font-weight: 700; }
.bem-font-black { font-weight: 900; }
.bem-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

/* Spacing Extras */
.bem-py-xl { padding-top: var(--bem-spacing-xxl); padding-bottom: var(--bem-spacing-xxl); }
.bem-mb-lg { margin-bottom: var(--bem-spacing-lg); }

/* Utilities */
.bem-hidden { display: none; }
.bem-relative { position: relative; }
.bem-absolute { position: absolute; }
.bem-fixed { position: fixed; }
.bem-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bem-z-10 { z-index: 10; }
.bem-z-50 { z-index: 50; }
.bem-overflow-hidden { overflow: hidden; }
.bem-overflow-x-hidden { overflow-x: hidden; }

/* Prose for long-form content */
.bem-prose { font-size: 1.125rem; line-height: 1.8; color: var(--bem-text); }
.bem-prose p { margin-bottom: 1.5rem; }
.bem-prose h2 { font-size: 1.75rem; font-weight: 800; margin: 2.5rem 0 1.25rem; letter-spacing: -0.02em; }
.bem-prose h3 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; letter-spacing: -0.01em; }
.bem-prose ul, .bem-prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.bem-prose li { margin-bottom: 0.5rem; }
.bem-prose strong { font-weight: 700; color: var(--bem-text); }
.bem-prose blockquote { border-left: 4px solid var(--bem-primary); padding-left: 1.5rem; font-style: italic; margin: 2rem 0; color: var(--bem-text-muted); }
.bem-prose img { max-width: 100%; border-radius: var(--bem-radius-lg); margin: 2rem 0; box-shadow: var(--bem-shadow-md); }
@media (min-width: 768px) { 
  .bem-prose { font-size: 1.25rem; } 
  .bem-prose h2 { font-size: 2.25rem; }
  .bem-prose h3 { font-size: 1.75rem; }
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.bem-animate-reveal { animation: fadeIn 0.8s ease-out forwards; opacity: 0; }

@media (min-width: 768px) {
  .bem-md-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .bem-md-flex-row { flex-direction: row; }
  .bem-md-hidden { display: none; }
  .bem-md-text-left { text-align: left; }
  .bem-md-items-end { align-items: flex-end; }
  .bem-md-justify-start { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .bem-sm-hidden { display: none; }
  .bem-navbar__menu { display: none; }
  .bem-section { padding: var(--bem-spacing-xl) 0; }
  .bem-container { padding: 0 var(--bem-spacing-md); }
}