/* =========================================================
   F.I.E.L. — Design Tokens
   Variables CSS para colores, tipografía, espaciado y bordes.
   Editar aquí cualquier valor global del sistema visual.
   ========================================================= */

:root {
  /* ---------- Identidad ---------- */
  --color-navy:        #23376A;
  --color-navy-deep:   #1A2E62;
  --color-crimson:     #72212C;
  --color-crimson-700: #5B1A23;

  /* ---------- Superficies ---------- */
  --color-bg:          #F6F3ED;
  --color-bg-alt:      #E9E5DC;
  --color-bg-dark:     #1A2E62;
  --color-white:       #FFFFFF;

  /* ---------- Texto ---------- */
  --color-text-dark:   #1C1C2E;
  --color-text-light:  #FFFFFF;
  --color-text-muted:  #6B7280;
  --color-text-navy:   #23376A;

  /* ---------- Bordes y sombras ---------- */
  --color-border:      #D9D4C9;
  --color-border-soft: #ECE7DB;
  --shadow-card:       0 2px 8px rgba(20, 25, 50, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(20, 25, 50, 0.14);
  --shadow-nav:        0 1px 0 rgba(20, 25, 50, 0.06);
  --shadow-nav-scroll: 0 4px 14px rgba(20, 25, 50, 0.08);

  /* ---------- Tipografía ---------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala de texto */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.5rem;      /* 24 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 */
  --text-5xl:  3rem;        /* 48 */
  --text-6xl:  3.75rem;     /* 60 */

  /* ---------- Espaciado ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Contenedor ---------- */
  --container-max: 1200px;
  --container-px:  1.5rem;

  /* ---------- Bordes ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---------- Header ---------- */
  --nav-height: 80px;

  /* ---------- Transiciones ---------- */
  --t-fast: 150ms ease;
  --t-base: 240ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 420ms cubic-bezier(.2,.7,.2,1);
}