/* CSS Variables derived from Design System */
:root {
  --color-background: #f8fafb;
  --color-surface: #f8fafb;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #3f4945;
  --color-primary: #00342b;
  --color-on-primary: #ffffff;
  --color-primary-container: #004d40;
  --color-on-primary-container: #7ebdac;
  --color-primary-fixed-dim: #94d3c1;
  --color-surface-container-low: #f2f4f5;
  --color-surface-container-highest: #e1e3e4;
  --color-secondary-container: #9ef6b4;
  --color-on-secondary-container: #16733f;
  --color-outline-variant: #bfc9c4;
  --color-surface-tint: #29695b;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-surface);
  font-family: 'Be Vietnam Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Header Utilities */
.glass-header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0, 77, 64, 0.05); /* shadow-sm shadow-teal-900/5 */
}

/* Dark mode adjustment for header (if implemented later) */
.dark .glass-header {
  background-color: rgba(2, 6, 23, 0.8); /* slate-950/80 */
}

/* Typography Overrides */
.font-headline {
  font-family: 'Be Vietnam Pro', sans-serif;
}
.font-label {
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Structural Components */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
}

@media (max-width: 1024px) {
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Colors & Backgrounds Mapping Custom Classes */
.text-primary-brand { color: var(--color-primary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-on-primary { color: var(--color-on-primary); }
.text-primary-fixed-dim { color: var(--color-primary-fixed-dim); }

.bg-primary-brand { background-color: var(--color-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }

/* Borders & Interactive Defaults */
.rounded-xl { border-radius: 0.5rem; }
.rounded-2xl { border-radius: 0.75rem; } /* or 1rem depending on framework matching */
.transition-transform { transition: transform 0.2s ease-in-out; }
.transition-all { transition: all 0.2s ease-in-out; }

/* Image scaling inside card on hover */
.card-hover-image {
  transition: transform 0.7s ease;
}
.blog-card:hover .card-hover-image {
  transform: scale(1.05);
}

.blog-card-title {
  transition: color 0.2s ease;
}
.blog-card:hover .blog-card-title {
  color: var(--color-surface-tint) !important;
}

/* Aspect Ratio override to match aspect-[16/10] */
.ratio-16x10 {
  --bs-aspect-ratio: 62.5%; /* 10 / 16 * 100 */
}

/* Sidebar Hover Styles */
.sidebar-link-group:hover .sidebar-link-icon-container {
  transform: translateX(4px);
}
.sidebar-link-group .sidebar-badge {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar-link-group:hover .sidebar-badge {
  opacity: 1;
}

/* Subscription Box Overlay */
.newsletter-image-overlay {
  background: linear-gradient(to top, var(--color-primary-container), transparent);
}

/* Blog Details Specific */
.drop-cap::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 800;
    margin-right: 0.5rem;
    margin-bottom: -0.25rem;
    color: var(--color-primary-container);
}

.hero-gradient {
    background: linear-gradient(to top, var(--color-background), transparent, transparent);
}

.bottom-nav {
    border-top: 1px solid var(--color-surface-container-highest);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}