/**
 * Bengal SSG Default Theme
 * Main Stylesheet
 *
 * This file imports all component styles in the correct order.
 * Following CUBE CSS methodology: Composition, Utility, Block, Exception
 */

/* ============================================
   DESIGN TOKENS (Variables First!)
   ============================================ */

/* Use CSS Layers to stabilize cascade */
@layer tokens, base, utilities, components, pages;

/* Foundation tokens (primitives - never use directly) */
@layer tokens {
  @import url('tokens/foundation.css');
}

/* Semantic tokens (purpose-based - use these in components) */
@layer tokens {
  @import url('tokens/semantic.css');
}

/* Palette presets (optional overrides; activated via data-palette="...") */
@layer tokens {
  @import url('tokens/palettes/snow-lynx.css');
  @import url('tokens/palettes/brown-bengal.css');
  @import url('tokens/palettes/silver-bengal.css');
  @import url('tokens/palettes/charcoal-bengal.css');
  @import url('tokens/palettes/blue-bengal.css');
}

/* ============================================
   BASE STYLES (Resets & Foundations)
   ============================================ */

@layer base {
  @import url('base/reset.css');
}

@layer base {
  @import url('base/typography.css');
}

@layer base {
  @import url('base/prose-content.css');
}

@layer base {
  @import url('base/utilities.css');
}

@layer utilities {
  @import url('utilities/motion.css');
}

@layer base {
  @import url('base/accessibility.css');
}

@layer base {
  @import url('base/print.css');
}

/* ============================================
   COMPOSITION (Layout Primitives)
   ============================================ */

@layer base {
  @import url('composition/layouts.css');
}

/* ============================================
   LAYOUT STYLES (Legacy - will be refactored)
   ============================================ */

@layer pages {
  @import url('layouts/grid.css');
}

@layer pages {
  @import url('layouts/header.css');
}

@layer pages {
  @import url('layouts/footer.css');
}

@layer pages {
  @import url('layouts/resume.css');
}

@layer pages {
  @import url('layouts/changelog.css');
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

@layer components {
  @import url('components/admonitions.css');
}

@layer components {
  @import url('components/tabs.css');
}

@layer components {
  @import url('components/dropdowns.css');
}

@layer components {
  @import url('components/buttons.css');
}

@layer components {
  @import url('components/cards.css');
}

@layer components {
  @import url('components/tags.css');
}

@layer components {
  @import url('components/code.css');
}

@layer components {
  @import url('components/pagination.css');
}

@layer components {
  @import url('components/toc.css');
}

@layer components {
  @import url('components/related-posts.css');
}

@layer components {
  @import url('components/navigation.css');
}

@layer components {
  @import url('components/action-bar.css');
}

@layer components {
  @import url('components/docs-nav.css');
}

@layer components {
  @import url('components/badges.css');
}

@layer components {
  @import url('components/widgets.css');
}

@layer components {
  @import url('components/search.css');
}

@layer components {
  @import url('components/hero.css');
}

@layer components {
  @import url('components/interactive.css');
}

@layer components {
  @import url('components/reference-docs.css');
}

@layer components {
  @import url('components/api-docs.css');
}

@layer components {
  @import url('components/tutorial.css');
}

@layer components {
  @import url('components/blog.css');
}

@layer components {
  @import url('components/data-table.css');
}

@layer components {
  @import url('components/empty-state.css');
}

@layer components {
  @import url('components/meta.css');
}

@layer components {
  @import url('components/share.css');
}

@layer components {
  @import url('components/author.css');
}

@layer components {
  @import url('components/author-page.css');
}

@layer components {
  @import url('components/archive.css');
}

@layer components {
  @import url('components/category-browser.css');
}

/* Third-party libraries */
@layer components {
  @import url('tabulator.min.css');
}

/* ============================================
   PAGE-SPECIFIC STYLES
   ============================================ */

/* Removed page-specific CSS in favor of reusable components */

/* ============================================
   CUSTOM GLOBAL STYLES
   ============================================ */

/* Main Content Area */
main {
  flex: 1 0 auto;
  padding: var(--space-10) 0;
}

/* Home Page Hero: moved to components/hero.css; keep this section empty intentionally */

/* Section Headers */
.section-header {
  margin-bottom: var(--space-8);
}

.section-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.section-description {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: var(--color-text-muted);
}

.breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs li:last-child {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-12) 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: var(--space-2) var(--space-3);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast) var(--ease-out);
}

.pagination a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-bg-hover);
}

.pagination .active {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination .disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Alerts */
.alert {
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  line-height: var(--leading-relaxed);
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-error {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

[data-theme="dark"] .alert-info {
  color: #6edff6;
  background-color: #055160;
  border-color: #087990;
}

[data-theme="dark"] .alert-success {
  color: #75b798;
  background-color: #0f5132;
  border-color: #146c43;
}

[data-theme="dark"] .alert-warning {
  color: #ffda6a;
  background-color: #664d03;
  border-color: #997404;
}

[data-theme="dark"] .alert-error {
  color: #ea868f;
  background-color: #842029;
  border-color: #a52834;
}

/* Loading Indicator */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Print Styles */
@media print {

  header[role="banner"],
  footer[role="contentinfo"],
  .mobile-nav-toggle,
  .share-buttons,
  .article-nav {
    display: none !important;
  }

  main {
    padding: 0;
  }

  a {
    color: var(--color-text-primary) !important;
    text-decoration: underline !important;
  }

  .prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-text-muted);
  }
}
