/* ==========================================================================
   CSS Custom Properties (Design Tokens) — Pasaporte.cl
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-hero-dark:        #0a1f10;
  --color-hero-mid:         #12351e;
  --color-hero-light:       #1a4a2e;
  --color-accent:           #f0c040;
  --color-accent-hover:     #f5d060;
  --color-accent-dark:      #d4a520;
  --color-green-link:       #1a7a40;
  --color-green-link-hover: #22964e;
  --color-white:            #ffffff;
  --color-off-white:        #f7f9f8;
  --color-light-gray:       #e8ece9;
  --color-mid-gray:         #8a9a8e;
  --color-dark-gray:        #2d3e32;
  --color-text-body:        #1e2d22;
  --color-text-muted:       #5a6e5f;
  --color-overlay:          rgba(10, 31, 16, 0.55);
  --color-overlay-strong:   rgba(10, 31, 16, 0.72);
  --color-card-shadow:      rgba(10, 31, 16, 0.12);
  --color-card-shadow-hover:rgba(10, 31, 16, 0.22);

  /* ── Typography ── */
  --font-heading:  'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', 'Outfit', system-ui, -apple-system, sans-serif;

  --fs-display:    clamp(2.8rem, 5.5vw, 5rem);
  --fs-h1:         clamp(2rem, 4vw, 3.2rem);
  --fs-h2:         clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:         clamp(1.2rem, 2vw, 1.6rem);
  --fs-h4:         1.15rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-xs:         0.75rem;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  --lh-tight:      1.15;
  --lh-heading:    1.25;
  --lh-body:       1.7;

  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.08em;

  /* ── Spacing ── */
  --space-xs:      0.25rem;
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      1.5rem;
  --space-xl:      2rem;
  --space-2xl:     3rem;
  --space-3xl:     4rem;
  --space-4xl:     6rem;
  --space-5xl:     8rem;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-wide:1440px;
  --sidebar-width: 320px;
  --grid-gap:      1.5rem;
  --navbar-height: 80px;

  /* ── Borders & Radius ── */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-full:   9999px;
  --border-thin:   1px solid rgba(255,255,255,0.12);
  --border-card:   1px solid var(--color-light-gray);

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px var(--color-card-shadow);
  --shadow-md:     0 4px 12px var(--color-card-shadow);
  --shadow-lg:     0 8px 30px var(--color-card-shadow);
  --shadow-xl:     0 16px 50px var(--color-card-shadow-hover);
  --shadow-glow:   0 0 30px rgba(240, 192, 64, 0.15);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 600ms;

  /* ── Z-Index Scale ── */
  --z-base:        1;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-navbar:      500;
  --z-overlay:     600;
  --z-modal:       700;
}