@import 'tailwindcss';
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

/* ============================================================================
   Theme Configuration - Tailwind CSS 4.1
   ============================================================================ */

@theme {
  /* Font families */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;

  /* Font sizes */
  --font-size-2xs: 0.625rem;
  --line-height-2xs: 0.875rem;
  --font-size-xs: 0.75rem;
  --line-height-xs: 1rem;
  --font-size-sm: 0.875rem;
  --line-height-sm: 1.25rem;
  --font-size-base: 1rem;
  --line-height-base: 1.5rem;
  --font-size-lg: 1.125rem;
  --line-height-lg: 1.75rem;
  --font-size-xl: 1.25rem;
  --line-height-xl: 1.75rem;
  --font-size-2xl: 1.5rem;
  --line-height-2xl: 2rem;
  --font-size-3xl: 1.875rem;
  --line-height-3xl: 2.25rem;
  --font-size-4xl: 2.25rem;
  --line-height-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --line-height-5xl: 1;
  --font-size-6xl: 3.75rem;
  --line-height-6xl: 1;
  --font-size-7xl: 4.5rem;
  --line-height-7xl: 1;

  /* Colors - Light mode (Nature-inspired palette) */
  --color-background: #f5f5e8;
  --color-foreground: #1a2e0f;
  --color-overlay: #0f1a08;
  --color-shadow: #1a1a0f;

  --color-card: #fefef9;
  --color-card-foreground: #1a2e0f;

  --color-popover: #fefef9;
  --color-popover-foreground: #1a2e0f;

  --color-primary: #2e7d32;
  --color-primary-foreground: #f5f5e8;

  --color-secondary: #6b8e23;
  --color-secondary-foreground: #1a2e0f;

  --color-muted: #e8e8d3;
  --color-muted-foreground: #5a7a3a;

  --color-accent: #4a90a4;
  --color-accent-foreground: #1a2e0f;

  --color-destructive: #c62828;
  --color-destructive-foreground: #fefef9;

  --color-border: #c8d5b9;
  --color-input: #e0e8d8;
  --color-ring: #2e7d32;

  --color-sector-construction: #5d7c9a;
  --color-sector-production: #2e7d32;
  --color-sector-recreation: #d97757;
  --color-sector-logistics: #7b68b8;
  --color-success: #2e7d32;
  --color-warning: #f57c00;
  --color-warning-foreground: #2d5016;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(45, 45, 26, 0.06);
  --shadow: 0 2px 4px rgba(45, 45, 26, 0.07), 0 1px 2px -1px rgba(45, 45, 26, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(45, 45, 26, 0.08), 0 2px 4px -2px rgba(45, 45, 26, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(45, 45, 26, 0.08), 0 4px 6px -4px rgba(45, 45, 26, 0.09);
  --shadow-xl: 0 20px 25px -5px rgba(45, 45, 26, 0.09), 0 8px 10px -6px rgba(45, 45, 26, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(45, 45, 26, 0.2);

  /* Scale */
  --scale-98: 0.98;
  --scale-102: 1.02;

  /* Animations */
  --animate-spin-slow: spin 20s linear infinite;
  --animate-spin-slower: spin 30s linear infinite;
  --animate-spin-slow-reverse: spin-reverse 30s linear infinite;
}

@theme dark {
  /* Colors - Dark mode (Nature-inspired palette) */
  --color-background: #0f1a0f;
  --color-foreground: #f0f0e3;
  --color-overlay: #0a0f0a;
  --color-shadow: #050805;

  --color-card: #1a2e1a;
  --color-card-foreground: #f0f0e3;

  --color-popover: #1a2e1a;
  --color-popover-foreground: #f0f0e3;

  --color-primary: #4caf50;
  --color-primary-foreground: #0f1a0f;

  --color-secondary: #558b2f;
  --color-secondary-foreground: #f0f0e3;

  --color-muted: #2e3d2e;
  --color-muted-foreground: #d4d4c4;

  --color-accent: #5c9ead;
  --color-accent-foreground: #f0f0e3;

  --color-destructive: #ef5350;
  --color-destructive-foreground: #f0f0e3;

  --color-border: #3e4e3e;
  --color-input: #2e3d2e;
  --color-ring: #4caf50;

  --color-sector-construction: #7a9fc4;
  --color-sector-production: #4caf50;
  --color-sector-recreation: #e68a6a;
  --color-sector-logistics: #9b7fc8;
  --color-success: #66bb6a;
  --color-warning: #ffb74d;
  --color-warning-foreground: #1a2e1a;
}

/* ============================================================================
   Base Layer - Backward Compatibility & Core Styles
   ============================================================================ */

@layer base {
  /* Backward compatibility CSS variables (using hex colors) */
  :root {
    --background: #f5f5e8;
    --foreground: #1a2e0f;
    --overlay: #0f1a08;
    --shadow-color: #1a1a0f;

    --card: #fefef9;
    --card-foreground: #1a2e0f;

    --popover: #fefef9;
    --popover-foreground: #1a2e0f;

    --primary: #2e7d32;
    --primary-foreground: #f5f5e8;

    --secondary: #6b8e23;
    --secondary-foreground: #1a2e0f;

    --muted: #e8e8d3;
    --muted-foreground: #5a7a3a;

    --accent: #4a90a4;
    --accent-foreground: #1a2e0f;

    --destructive: #c62828;
    --destructive-foreground: #fefef9;

    --border: #c8d5b9;
    --input: #e0e8d8;
    --ring: #2e7d32;

    --radius: 0.5rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    --sector-construction: #5d7c9a;
    --sector-production: #2e7d32;
    --sector-recreation: #d97757;
    --sector-logistics: #7b68b8;
    --success: #2e7d32;
    --warning: #f57c00;
    --warning-foreground: #1a2e0f;

    --shadow-sm: 0 1px 2px rgba(45, 45, 26, 0.06);
    --shadow: 0 2px 4px rgba(45, 45, 26, 0.07), 0 1px 2px -1px rgba(45, 45, 26, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(45, 45, 26, 0.08), 0 2px 4px -2px rgba(45, 45, 26, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(45, 45, 26, 0.08), 0 4px 6px -4px rgba(45, 45, 26, 0.09);
    --shadow-xl: 0 20px 25px -5px rgba(45, 45, 26, 0.09), 0 8px 10px -6px rgba(45, 45, 26, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(45, 45, 26, 0.2);
  }

  .dark {
    --background: #0f1a0f;
    --foreground: #f0f0e3;
    --overlay: #0a0f0a;
    --shadow-color: #050805;

    --card: #1a2e1a;
    --card-foreground: #f0f0e3;

    --popover: #1a2e1a;
    --popover-foreground: #f0f0e3;

    --primary: #4caf50;
    --primary-foreground: #0f1a0f;

    --secondary: #558b2f;
    --secondary-foreground: #f0f0e3;

    --muted: #2e3d2e;
    --muted-foreground: #d4d4c4;

    --accent: #5c9ead;
    --accent-foreground: #f0f0e3;

    --destructive: #ef5350;
    --destructive-foreground: #f0f0e3;

    --border: #3e4e3e;
    --input: #2e3d2e;
    --ring: #4caf50;

    --sector-construction: #7a9fc4;
    --sector-production: #4caf50;
    --sector-recreation: #e68a6a;
    --sector-logistics: #9b7fc8;
    --success: #66bb6a;
    --warning: #ffb74d;
    --warning-foreground: #0f1a0f;
  }

  /* Core HTML elements */
  * {
    border-color: var(--border);
  }

  html {
    position: relative;
    background-color: var(--background);
    color: var(--foreground);
    scroll-behavior: smooth;
    scroll-padding-top: 4rem; /* Account for sticky header */
    scroll-snap-type: y proximity;
  }

  body {
    position: relative;
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Typography - Headings inherit color from parent, only set font-weight */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    color: inherit;
  }

  /* Text elements inherit color from parent */
  p,
  span,
  div,
  li,
  td,
  th,
  label,
  small,
  strong,
  em,
  b,
  i,
  dt,
  dd {
    color: inherit;
  }

  /* Links */
  a {
    color: var(--primary);
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  a:hover {
    color: var(--primary);
    opacity: 0.8;
  }

  /* Form elements - inherit text color from parent */
  input,
  textarea,
  select {
    border-color: var(--border);
    color: inherit;
    background-color: var(--background);
  }

  /* Select options need explicit styling */
  select option {
    background-color: var(--background);
    color: var(--foreground);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--muted-foreground);
  }

  /* Interactive elements */
  button {
    color: inherit;
    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  /* SVG icons */
  svg {
    color: currentColor;
    fill: currentColor;
  }

  /* Focus rings */
  [class*='ring-ring']:focus-visible {
    --tw-ring-color: var(--ring);
  }

  /* Scrollbar utilities */
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Hide Leaflet attribution */
  .leaflet-control-attribution {
    display: none !important;
  }

  /* Respect user preference for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ============================================================================
   Components Layer - Prose Typography
   ============================================================================ */

@layer components {
  /* Typography plugin integration - enhance base prose styles */
  .prose {
    color: var(--foreground);
    opacity: 0.85;
    line-height: var(--line-height-lg);
    max-width: 65ch;
  }

  /* Custom heading styles that work with typography plugin */
  .prose h1,
  .prose h2,
  .prose h3 {
    font-family: var(--font-serif);
    font-weight: 600;
  }

  .prose h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-4xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
  }

  .prose h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-2xl);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
  }

  .prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose p.lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
    color: var(--foreground);
    opacity: 0.7;
    text-align: center;
  }

  .prose a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
  }

  .prose a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }

  .prose ul,
  .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.5rem;
  }

  .prose ul {
    list-style-type: disc;
  }

  .prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .prose strong {
    font-weight: 600;
  }

  .prose code {
    background-color: var(--muted);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
  }

  .prose pre {
    background-color: var(--muted);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
  }

  .prose blockquote {
    border-left-color: var(--border);
    color: var(--foreground);
    opacity: 0.8;
  }

  /* Scroll snap utilities */
  .scroll-snap-container {
    scroll-snap-type: y proximity;
    overflow-y: scroll;
    height: 100vh;
  }

  .scroll-snap-align-start {
    scroll-snap-align: start;
    scroll-margin-top: 4rem; /* Account for sticky header */
  }

  .scroll-snap-align-center {
    scroll-snap-align: center;
  }

  .scroll-snap-align-end {
    scroll-snap-align: end;
  }

  /* Smooth scrolling for main content - scroll snap handled by individual sections */
  main {
    position: relative;
  }

  /* Ensure sections are properly spaced on mobile */
  @media (max-width: 640px) {
    .scroll-snap-align-start {
      scroll-margin-top: 3rem;
    }
  }
}

/* ============================================================================
   Leaflet Marker Cluster Styles
   ============================================================================ */

.marker-cluster {
  background-color: hsl(var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid hsl(var(--background));
  box-shadow: 0 2px 8px hsl(var(--color-shadow) / 0.3);
  transition: all 0.2s ease;
}

.marker-cluster:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px hsl(var(--color-shadow) / 0.4);
}

.marker-cluster-small {
  width: 40px;
  height: 40px;
  font-size: 0.75rem;
}

.marker-cluster-medium {
  width: 50px;
  height: 50px;
  font-size: 0.875rem;
}

.marker-cluster-large {
  width: 60px;
  height: 60px;
  font-size: 1rem;
}

.marker-cluster div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Custom organization marker styles */
.custom-organization-marker {
  background: transparent;
  border: none;
}

.custom-historical-marker {
  background: transparent;
  border: none;
}