/* ═══════════════════════════════════════════════════════════════
   variables.css — Design Tokens (Custom Properties)
   Bird City Network — Seguimiento y Control
   WCAG 2.1 AA Compliant Color Palette
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors (Bird City Network — Green/Earth palette) ── */
  --color-primary: #2D6A4F;          /* Forest green — main brand */
  --color-primary-dark: #1B4332;     /* Dark forest — hover/active */
  --color-primary-light: #52B788;    /* Light green — accents */
  --color-primary-lighter: #95D5B2;  /* Lighter green — backgrounds */
  --color-primary-lightest: #D8F3DC; /* Lightest green — subtle bg */

  --color-secondary: #1B4332;        /* Deep green */
  --color-accent: #FFB703;           /* Bird yellow — CTAs/highlights */
  --color-accent-dark: #FB8500;      /* Orange — warnings */

  /* ── Semantic Colors ── */
  --color-success: #2D6A4F;
  --color-success-bg: #D8F3DC;
  --color-danger: #C13030;
  --color-danger-bg: #FDE8E8;
  --color-warning: #FFB703;
  --color-warning-bg: #FFF3CD;
  --color-info: #0077B6;
  --color-info-bg: #E0F2FE;

  /* ── Neutral Palette ── */
  --color-dark: #1A1A2E;
  --color-body: #2D3748;
  --color-muted: #718096;
  --color-border: #E2E8F0;
  --color-bg: #F7FAFC;
  --color-surface: #FFFFFF;
  --color-sidebar: #1B4332;
  --color-sidebar-hover: #2D6A4F;

  /* ── Typography ── */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px — hero */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Spacing Scale ── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* ── Border Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Layout ── */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;
  --container-max-width: 1280px;
  --content-max-width: 768px;

  /* ── Z-Index Scale ── */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1060;
  --z-skip-link: 9999;

  /* ── Focus Ring (WCAG 2.4.7) ── */
  --focus-ring-color: #2D6A4F;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ── Map Colors (Leaflet custom) ── */
  --map-tile-neighborhood: #52B788;
  --map-tile-species: #0077B6;
  --map-tile-route: #FFB703;
  --map-tile-infrastructure: #FB8500;
}