/* ==========================================================================
   FCP LATAM — Sistema de Diseño / Tokens
   Fundación de Comunicadores y Periodistas Latinoamericanos, A.C.
   ========================================================================== */

/* Las tipografías se cargan desde assets/css/fuentes.css (alojadas en este dominio). */

:root {
  color-scheme: light;

  /* ---- Color institucional ---- */
  --color-primary-blue: #004B93;
  --color-primary-deep:  #003468;
  --color-primary-soft:  #E8F0F9;
  --color-dark-slate:    #2C3E50;
  --color-ink:           #16212B;
  --color-pure-white:    #FFFFFF;
  --color-light-gray:    #F8F9FA;
  --color-gold-presea:   #C59B27;
  --color-gold-soft:     #FBF4E0;
  --color-alert-red:     #C0392B;
  --color-alert-soft:    #FCEDEB;
  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-muted:         #5A6B7C;
  --color-muted-light:   #64748B;

  /* Superficies oscuras (hero, observatorio, footer) */
  --surface-night:       #0C1620;
  --surface-night-2:     #14212E;
  --on-night:            #EAF1F8;
  --on-night-muted:      #93A6B8;

  /* ---- Tipografía ---- */
  --font-display: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-micro:  0.75rem;   /* 12 */
  --fs-label:  0.8125rem; /* 13 */
  --fs-sm:     0.9375rem; /* 15 */
  --fs-base:   1.0625rem; /* 17 */
  --fs-lg:     1.1875rem; /* 19 */
  --fs-xl:     1.5rem;
  --fs-2xl:    clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-3xl:    clamp(2rem, 1.3rem + 2.6vw, 3rem);
  --fs-4xl:    clamp(2.4rem, 1.4rem + 4.2vw, 4.25rem);
  --fs-hero:   clamp(2.35rem, 1.05rem + 3.3vw, 4.15rem);

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.65;
  --lh-loose: 1.78;

  /* ---- Espaciado (densidad estándar) ---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* ---- Radios / sombras ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-xs: 0 1px 2px rgba(16,32,48,.06);
  --shadow-sm: 0 2px 6px rgba(16,32,48,.07), 0 1px 2px rgba(16,32,48,.05);
  --shadow-md: 0 10px 24px -8px rgba(16,32,48,.16), 0 2px 6px rgba(16,32,48,.06);
  --shadow-lg: 0 26px 60px -22px rgba(16,32,48,.28), 0 6px 16px rgba(16,32,48,.08);

  /* ---- Contenedores ---- */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 56px);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;

  /* ---- Capas ---- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 120;
}