/* ═══════════════════════════════════════════════════════════
   PAPIK · DESIGN TOKENS
   Single source of truth for colors, typography, and spacing
   based on the Blog design system.
═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'TT Firs Neue';
  src: url('../fonts/TT_Firs_Neue_Light.woff2') format('woff2'),
       url('../fonts/TT_Firs_Neue_Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Firs Neue';
  src: url('../fonts/TT_Firs_Neue_Regular.woff2') format('woff2'),
       url('../fonts/TT_Firs_Neue_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Firs Neue';
  src: url('../fonts/TT_Firs_Neue_Medium.woff2') format('woff2'),
       url('../fonts/TT_Firs_Neue_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Palette ─── */
  --green:       #002819;
  --green-light: rgba(0,40,25,0.62);
  --green-dark:  #000000;
  --accent:      #002819;
  --green-accent: #d9e4e0; /* authorized light mint tint (index-page surface) · used for CTA hover */
  --accent-soft: rgba(0,40,25,0.10);
  --accent-soft-hover: rgba(0,40,25,0.16);

  /* Surfaces */
  --bg-light:    rgba(0,40,25,0.14);
  --bg-section:  rgba(0,40,25,0.14);
  --footer-bg:   #002819;

  /* Text · opacities tuned to clear WCAG AA (4.5:1) on the lightest surface
     used for body text (mint #d9e4e0): muted 5.96:1, muted-light 4.7:1. */
  --text:        #002819;
  --muted:       rgba(0,40,25,0.74);
  --muted-light: rgba(0,40,25,0.66);

  /* Borders */
  --border:      rgba(0,40,25,0.20);
  --border-soft: rgba(0,40,25,0.12);

  /* Feedback states */
  --danger:      #002819;
  --danger-soft: rgba(0,40,25,0.10);
  --focus-ring:  rgba(0,40,25,0.55);

  /* Warm neutrals (existing) */
  --warm-1:      rgba(0,40,25,0.22);
  --warm-2:      rgba(0,40,25,0.45);

  /* ─── Typography ─── */
  --ff-sans: 'TT Firs Neue', Arial, Helvetica, sans-serif;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* ─── Radii ─── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-pill: 21px;
  --r-full: 9999px;

  /* ─── Hero band (encabezadora) ─── single source of truth for the photo
     band height on every "foto + panel blanc superposat" card site-wide.
     rl-featured (364 pages) + phases-rail (23 pages) share these. Do NOT
     hard-code 480/380 per section again; change it here once. */
  --hero-band-h:    440px;
  --hero-band-h-sm: 300px;

  /* ─── Shadows ─── */
  --sh-btn-hover: 0 6px 20px rgba(0,40,25,.20);
  --sh-card-hover: 0 16px 40px rgba(0,40,25,.10);
  --sh-card-hover-sm: 0 12px 30px rgba(0,40,25,.12);

  /* ─── Transitions ─── */
  --ease-anim: cubic-bezier(.22,.68,0,1.05);
  --ease-img: cubic-bezier(.25,.46,.45,.94);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s;
  --t-base: .22s;
  --t-slow: .35s;
  --t-anim: .65s;
}