@import url('/assets/fonts/fonts.css');

:root {
  /* =====================================================================
   * 1. COLOR PALETTE (WCAG 2.1 AA Verified — Minimum 4.5:1 text / 3:1 UI)
   * ===================================================================== */
  --color-forest-950: #0B1F18; /* Footer, dark hero backdrops, high-contrast dark mode surface (5.86:1 with river-400) */
  --color-forest-900: #102E24; /* Primary brand dark, display headings on light (14.6:1 on white) */
  --color-forest-700: #1D4D3D; /* Hover state on deep forest */
  --color-river-700:  #0A5C5C; /* Primary link / river deep accent (7.78:1 on white) */
  --color-river-600:  #0D7270; /* Primary interactive button & CTA surface (5.74:1 white text & on white) */
  --color-river-400:  #1FA8A0; /* River highlight on dark surfaces, decorative wave, focus accent */
  --color-river-100:  #E0F2F1; /* Soft river badge tint */

  --color-amber-700:  #A84A0A; /* High-contrast warm terracotta text & badge on light (5.76:1 on white) */
  --color-amber-600:  #B8520B; /* Accent CTA (MTB / adventure highlights) with #FFFFFF text (4.94:1) */
  --color-sun-400:    #F2A918; /* Golden accent strictly on dark forest surfaces (8.55:1 on forest-950) */

  --color-bg-page:    #F6F8F7; /* Main canvas neutral snow/valley stone */
  --color-bg-alt:     #EAEFEC; /* Secondary soft surface / alternating sections */
  --color-surface:    #FFFFFF; /* Cards, inputs, popovers */
  --color-surface-sub:#F1F5F3; /* Compact table zebra row / table header */

  --color-ink-900:    #111C18; /* Body text (16.36:1 on page bg, 17.45:1 on white) */
  --color-ink-700:    #384B43; /* Muted labels & metadata (8.73:1 on page bg, 8.0:1 on alt bg) */
  --color-ink-inverse:#FFFFFF;
  --color-ink-inv-mut:#C2D6CE; /* Muted text on forest-950/900 dark blocks */

  --color-border:     #CFD9D4; /* Hairline card / table rules */
  --color-border-strong:#94A89F;

  /* Semantic Status (light badges & text) */
  --color-ok:         #14532D; /* 9.11:1 on white */
  --color-ok-bg:      #DCFCE7;
  --color-warn:       #92400E; /* 7.09:1 on white */
  --color-warn-bg:    #FEF3C7;
  --color-err:        #B91C1C; /* 6.47:1 on white */
  --color-err-bg:     #FEE2E2;
  --color-info:       #075985;
  --color-info-bg:    #E0F2FE;

  /* Focus Ring */
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px #0A5C5C;

  /* =====================================================================
   * 2. TYPOGRAPHY (Self-hosted Fraunces + Plus Jakarta Sans)
   * ===================================================================== */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --text-3xl:  clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --text-4xl:  clamp(2.125rem, 1.5rem + 2.6vw, 3.375rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.62;

  /* =====================================================================
   * 3. SPACING, RADII, LAYOUT & ELEVATIONS
   * ===================================================================== */
  --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-7: 3rem;     /* 48px */
  --space-8: 4.5rem;   /* 72px */

  --container-max: 76rem; /* 1216px */
  --container-pad: clamp(1rem, 3vw, 2rem);

  --radius-sm:   0.375rem; /* 6px */
  --radius-md:   0.625rem; /* 10px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(16, 46, 36, 0.06), 0 1px 2px rgba(16, 46, 36, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 46, 36, 0.08), 0 2px 6px rgba(16, 46, 36, 0.04);
  --shadow-lg: 0 18px 42px rgba(11, 31, 24, 0.14);

  /* Mobile Modal Safe Viewport Constraints */
  --modal-max-height: calc(100dvh - max(2rem, env(safe-area-inset-top) + 1rem));
  --safe-bottom-bar:  calc(4.5rem + env(safe-area-inset-bottom));

  --transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1);

  /* =====================================================================
   * 4. MOTION SYSTEM (solo transform / opacity / sombras moderadas)
   * ===================================================================== */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   420ms;
  --dur-reveal: 520ms;
  --reveal-shift: 18px;
  --transition-base: var(--dur-base) var(--ease-out-quint);
  --transition-slow: var(--dur-slow) var(--ease-out-quint);

  /* =====================================================================
   * 5. ELEVACIÓN EN CAPAS (sombras multicapa frías tono bosque)
   * ===================================================================== */
  --shadow-xs: 0 1px 2px rgba(11, 31, 24, 0.05);
  --elev-1: 0 1px 1px rgba(11, 31, 24, 0.03), 0 2px 4px rgba(11, 31, 24, 0.04), 0 6px 14px -6px rgba(16, 46, 36, 0.10);
  --elev-2: 0 1px 2px rgba(11, 31, 24, 0.04), 0 6px 12px -4px rgba(16, 46, 36, 0.08), 0 18px 36px -14px rgba(16, 46, 36, 0.20);
  --elev-3: 0 2px 4px rgba(11, 31, 24, 0.05), 0 12px 24px -8px rgba(11, 31, 24, 0.14), 0 32px 64px -24px rgba(11, 31, 24, 0.34);
  --elev-glow-river: 0 0 0 1px rgba(31, 168, 160, 0.35), 0 18px 40px -18px rgba(13, 114, 112, 0.45);
  --hairline:       1px solid rgba(16, 46, 36, 0.09);
  --hairline-light: 1px solid rgba(255, 255, 255, 0.12);

  /* =====================================================================
   * 6. GRADIENTES, GLASS Y TEXTURAS DE MARCA
   * ===================================================================== */
  --grad-forest:   linear-gradient(135deg, #0B1F18 0%, #102E24 55%, #123A31 100%);
  --grad-forest-deep: linear-gradient(160deg, #0B1F18 0%, #0E2820 60%, #0B1F18 100%);
  --grad-river:    linear-gradient(135deg, #0D7270 0%, #0A5C5C 100%);
  --grad-sun-line: linear-gradient(90deg, #F2A918 0%, #1FA8A0 100%);
  --grad-mist:     linear-gradient(180deg, #F6F8F7 0%, #EAEFEC 100%);
  --glass-light-bg: rgba(255, 255, 255, 0.82);
  --glass-dark-bg:  rgba(11, 31, 24, 0.86);
  --glass-blur:     saturate(160%) blur(12px);
  --header-h: 68px;

  /* Curvas de nivel (topografía) en SVG inline: sin requests extra */
  --texture-topo-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.07' stroke-width='1.2'%3E%3Cpath d='M280 92c86 4 168 52 176 132 8 84-58 150-140 170-86 22-188-6-214-86-26-82 24-156 92-192 28-15 56-25 86-24z'/%3E%3Cpath d='M282 132c64 3 126 40 132 98 6 62-44 110-104 124-64 16-138-4-158-62-18-60 18-114 68-140 20-12 40-20 62-20z'/%3E%3Cpath d='M284 172c42 2 82 26 86 64 4 40-28 70-66 78-42 10-90-2-102-40-12-38 12-74 44-90 12-8 24-12 38-12z'/%3E%3Cpath d='M286 210c22 2 42 14 44 32 2 20-14 34-32 38-22 4-44-2-50-20-6-18 6-36 22-44 6-4 10-6 16-6z'/%3E%3Cpath d='M-20 470c80-30 150-10 220 20s150 50 230 20 120-60 150-50'/%3E%3Cpath d='M-20 510c80-30 160-6 230 22s150 44 230 16 110-52 140-44'/%3E%3Cpath d='M-20 30c60 20 120 40 190 20S300-10 380 10s130 50 200 30'/%3E%3C/g%3E%3C/svg%3E");
  --texture-topo-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23102E24' stroke-opacity='0.06' stroke-width='1.2'%3E%3Cpath d='M280 92c86 4 168 52 176 132 8 84-58 150-140 170-86 22-188-6-214-86-26-82 24-156 92-192 28-15 56-25 86-24z'/%3E%3Cpath d='M282 132c64 3 126 40 132 98 6 62-44 110-104 124-64 16-138-4-158-62-18-60 18-114 68-140 20-12 40-20 62-20z'/%3E%3Cpath d='M284 172c42 2 82 26 86 64 4 40-28 70-66 78-42 10-90-2-102-40-12-38 12-74 44-90 12-8 24-12 38-12z'/%3E%3Cpath d='M-20 470c80-30 150-10 220 20s150 50 230 20 120-60 150-50'/%3E%3Cpath d='M-20 510c80-30 160-6 230 22s150 44 230 16 110-52 140-44'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --reveal-shift: 0px;
  }
}