/*
 * CSS Layers Architecture - Clean Version
 * Copyright 2025 Armando Sori - Licensed under Apache License, Version 2.0
 */

/* Define CSS Layers in order of specificity (lowest to highest) */
@layer reset, tokens, base, layout, components, utilities, overrides;

/*
 * Layer Definitions:
 * 
 * 1. reset - CSS reset and normalization
 * 2. tokens - Design tokens and CSS custom properties
 * 3. base - Base element styles (html, body, headings, etc.)
 * 4. layout - Layout components (containers, grids, flex utilities)
 * 5. components - UI components (buttons, cards, modals, etc.)
 * 6. utilities - Utility classes and helper styles
 * 7. overrides - Theme overrides and state-specific styles
 */

/* Reset Layer - Import your reset styles here */
@layer reset {
  /* Box-sizing reset only to avoid global margin/padding overrides */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Responsive media without constraining all elements */
  img,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
    height: auto;
  }
}

/* Tokens Layer - Design system foundation */
@layer tokens {
  /* Design tokens will be imported from design-tokens.css */

  /* CSS custom properties will cascade from design-tokens.css */
}

/* Base Layer - Element defaults */
@layer base {
  /* Base element styles will be imported from main.css */
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;

    /* Reserve vertical scrollbar to prevent layout shift when it appears */

    /* x hidden, y auto */
    overflow: hidden auto;

    /* Keep a stable gutter so layout doesn't shift when scrollbar toggles */
    scrollbar-gutter: stable both-edges;
  }

  html.loaded {
    scroll-behavior: smooth;
  }

  body {
    /* Keep body margin reset local instead of via universal selector */
    margin: 0;
    font-family: var(
      --font-family-base,
      var(
        --font-family-primary,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif
      )
    );
    line-height: var(--line-height-base, 1.6);

    /* Use semantic theme tokens to prevent light flash during theme swap */
    color: var(--theme-text-primary, #111827);
    background-color: var(--theme-bg-primary, #fff);
    font-size: var(--font-size-base, 1rem);
  }

  /* Base heading styles */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--theme-text-primary, #2d3748);
    font-family: inherit;
    margin: 0;
  }
}

/* Layout Layer - Layout systems */
@layer layout {
  /* Container and responsive layout styles */
  .layout-container-responsive {
    width: 100%;
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
    padding-left: var(--container-padding-x, 1.5rem);
    padding-right: var(--container-padding-x, 1.5rem);
  }

  /* Main content layout */
  .main-content {
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Grid utilities */
  .grid {
    display: grid;
  }

  .flex {
    display: flex;
  }

  .flex-column {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-1 {
    gap: 0.25rem;
  }

  .gap-2 {
    gap: 0.5rem;
  }

  .gap-3 {
    gap: 0.75rem;
  }

  .gap-4 {
    gap: 1rem;
  }

  .gap-6 {
    gap: 1.5rem;
  }

  .gap-8 {
    gap: 2rem;
  }

  /* Responsive grid utilities */
  .grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Responsive utilities */

  @media (width >= 768px) {
    .md-grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .md-grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (width >= 1024px) {
    .lg-grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .lg-grid-cols-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

/* Components Layer - Base component styles */
@layer components {
  /* Component styles are imported from individual component CSS files */

  /* This layer contains base styles only - no theme overrides */
}

/* Utilities Layer - Utility classes */
@layer utilities {
  /* Spacing utilities */
  .m-0 {
    margin: 0;
  }
  .m-1 {
    margin: 0.25rem;
  }
  .m-2 {
    margin: 0.5rem;
  }
  .m-3 {
    margin: 0.75rem;
  }
  .m-4 {
    margin: 1rem;
  }

  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: 0.25rem;
  }
  .p-2 {
    padding: 0.5rem;
  }
  .p-3 {
    padding: 0.75rem;
  }
  .p-4 {
    padding: 1rem;
  }

  /* Text utilities */
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }

  .font-bold {
    font-weight: bold;
  }
  .font-semibold {
    font-weight: 600;
  }
  .font-normal {
    font-weight: normal;
  }

  /* Display utilities */
  .hidden {
    display: none;
  }
  .block {
    display: block;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  /* Position utilities */
  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .sticky {
    position: sticky;
  }

  /* Overflow utilities */
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-scroll {
    overflow: scroll;
  }

  /* Border radius utilities */
  .rounded {
    border-radius: 0.375rem;
  }
  .rounded-md {
    border-radius: 0.5rem;
  }
  .rounded-lg {
    border-radius: 0.75rem;
  }
  .rounded-xl {
    border-radius: 1rem;
  }
  .rounded-full {
    border-radius: 9999px;
  }

  /* Shadow utilities */
  .shadow {
    box-shadow:
      0 1px 3px 0 rgb(0 0 0 / 10%),
      0 1px 2px 0 rgb(0 0 0 / 6%);
  }
  .shadow-md {
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 10%),
      0 2px 4px -1px rgb(0 0 0 / 6%);
  }
  .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgb(0 0 0 / 10%),
      0 4px 6px -2px rgb(0 0 0 / 5%);
  }
  .shadow-xl {
    box-shadow:
      0 20px 25px -5px rgb(0 0 0 / 10%),
      0 10px 10px -5px rgb(0 0 0 / 4%);
  }
}

/* Overrides Layer - Essential overrides and state-specific styles only */
@layer overrides {
  /* =====================================================
   * ESSENTIAL OVERRIDES ONLY - Non-redundant theme overrides that aren't handled by design-tokens.css
   * Note: Most theme overrides removed since design-tokens.css already provides complete automatic 
   * theme switching via body.theme-dark selectors that redefine all --theme-* variables.
   * ===================================================== */

  /* =====================================================
   * ESSENTIAL OVERRIDES ONLY - Accessibility, Print, Focus states
   * Note: Component theme overrides removed - design-tokens.css handles automatic theme switching
   * ===================================================== */

  /* High Contrast Mode Support - Progressive Enhancement */
  @media (forced-colors: active) {
    .button,
    .primary-button,
    .secondary-button {
      border: 2px solid currentColor;
    }

    .modal-backdrop {
      background: rgb(0 0 0 / 80%);
    }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Print Styles */
  @media print {
    body.theme-dark {
      background: white !important;
      color: black !important;
    }

    .hero {
      background: white !important;
      color: black !important;
    }

    .modal,
    .settings-menu,
    .dropdown {
      background: white !important;
      color: black !important;
      box-shadow: none !important;
    }
  }

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

  /* =====================================================
   * CATEGORY HEADER DARK THEME OVERRIDES
   * Moved from category-header.css to comply with CSS layers architecture
   * ===================================================== */

  /* Difficulty badges dark theme */
  body.theme-dark .category-difficulty.difficulty-beginner,
  body.dark-mode .category-difficulty.difficulty-beginner {
    background: var(--color-success);
    color: var(--color-white);
    opacity: 0.8;
  }

  body.theme-dark .category-difficulty.difficulty-intermediate,
  body.dark-mode .category-difficulty.difficulty-intermediate {
    background: var(--color-warning);
    color: var(--color-white);
    opacity: 0.8;
  }

  body.theme-dark .category-difficulty.difficulty-advanced,
  body.dark-mode .category-difficulty.difficulty-advanced {
    background: var(--color-error);
    color: var(--color-white);
    opacity: 0.8;
  }

  /* Progress ring badge pulse dark theme */
  body.theme-dark .category-progress-ring.pulse-for-badge .progress-percentage,
  body.dark-mode .category-progress-ring.pulse-for-badge .progress-percentage {
    color: var(--progress-pulse-color, var(--color-accent-400));
    text-shadow: 0 0 6px var(--progress-pulse-color, var(--color-accent-400));
    animation: text-glow-dark-fluid 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Scenario hover category header dark theme */
  body.theme-dark .scenario-hover-category-header,
  body.dark-mode .scenario-hover-category-header {
    background: rgb(31 41 55 / 98%);
    border-color: var(--color-gray-600);
  }

  /* Progress ring tooltip dark theme */
  body.theme-dark .progress-ring-tooltip,
  body.dark-mode .progress-ring-tooltip {
    background: var(--color-gray-800);
    border-color: var(--color-gray-600);
  }

  body.theme-dark .progress-ring-tooltip::before,
  body.dark-mode .progress-ring-tooltip::before {
    border-bottom-color: var(--color-gray-800);
  }

  /* High contrast mode tooltip dark theme */
  @media (prefers-contrast: more) {
    body.theme-dark .progress-ring-tooltip,
    body.dark-mode .progress-ring-tooltip {
      background: #fff;
      color: #000;
    }
  }

  /* Dark theme animations for progress ring pulse */
  @keyframes text-glow-dark-fluid {
    0%,
    100% {
      text-shadow: 0 0 6px var(--progress-pulse-color, var(--color-accent-400));
      color: var(--progress-pulse-color, var(--color-accent-400));
    }

    50% {
      text-shadow:
        0 0 10px var(--progress-pulse-color, var(--color-accent-300)),
        0 0 14px var(--progress-pulse-light, var(--color-accent-200));
      color: var(--progress-pulse-dark, var(--color-accent-500));
    }
  }

  /* Error and Success States */
  .error-border,
  .input-error {
    border-color: var(--color-error) !important;
  }

  .success-border,
  .input-success {
    border-color: var(--color-success) !important;
  }

  /* Canvas Utilities for Radar Charts */
  .canvas-auto-size {
    width: 100% !important;
    height: 100% !important;
  }

  .canvas-block {
    display: block !important;
  }

  .canvas-no-touch {
    touch-action: none !important;
  }

  /* Debug and Success Indicators for Canvas Elements */
  .canvas-debug-active {
    border: 2px solid rgb(0 200 0 / 50%) !important;
    box-shadow: 0 0 10px rgb(0 200 0 / 30%) !important;
  }

  .canvas-success-subtle {
    border: 1px solid rgb(0 200 0 / 30%) !important;
    box-shadow: 0 0 5px rgb(0 200 0 / 20%) !important;
  }

  .canvas-debug-outline {
    outline: 2px solid #007acc !important;
  }

  /* Dynamic canvas sizing using CSS custom properties */
  .canvas-dynamic-size {
    width: var(--canvas-width, 400px) !important;
    height: var(--canvas-height, 300px) !important;
  }

  /* ==========================================
   * Scenario Modal Radar Chart – Transition Neutralizer
   * ------------------------------------------
   * Purpose: Prevent container-level transitions/animations from
   * demo/hero contexts from affecting the scenario modal radar chart
   * during its Chart.js-driven entrance animation. Keeps the container
   * static so only the polygon animates.
   * Scope: .scenario-modal-radar-chart only (modal context)
   * ========================================== */
  .scenario-modal-radar-chart,
  .scenario-modal-radar-chart.radar-chart-container,
  .scenario-modal-radar-chart.scenario-radar-chart {
    transition: none !important;
    animation: none !important;
  }

  /* If any scale/transform is applied via .scenario-radar-chart.animating
     or imported demo styles, neutralize it for the modal container */
  .scenario-modal-radar-chart.scenario-radar-chart,
  .scenario-modal-radar-chart.scenario-radar-chart.animating {
    transform: none !important;
  }

  /* Ensure the canvas itself doesn't inherit transitions */
  .scenario-modal-radar-chart canvas {
    transition: none !important;
    animation: none !important;
  }

  /* ==========================================
   * Donor Wall Dark Theme Overrides
   * ==========================================
   * 
   * All donor wall components are designed to work with semantic theme tokens.
   * Dark theme support is automatically handled by the semantic tokens defined
   * in the overrides layer above. No additional overrides needed since the
   * component uses proper semantic tokens like:
   * 
   * - var(--theme-bg-primary)
   * - var(--theme-bg-secondary)  
   * - var(--theme-bg-tertiary)
   * - var(--theme-text-primary)
   * - var(--theme-text-secondary)
   * - var(--theme-border-primary)
   * - var(--theme-accent-primary)
   * 
   * These tokens automatically adapt when body.theme-dark is applied.
   * The donor wall component is fully architecture-compliant.
   */
}

.canvas-no-outline {
  outline: none !important;
}