/* =============================================================
   Grupo ATU — Migrantes · Design System
   colors_and_type.css — Low-level tokens + semantic variables
   ============================================================= */

/* ------------ FONTS ------------
   NOTE (substitution): Grupo ATU did not provide font files.
   We default to Plus Jakarta Sans — a friendly, humanist, highly
   legible geometric sans that matches the "clean, warm, professional,
   mobile-first" brief and works well for diverse / multilingual
   readers. DM Serif Display is used sparingly for warm editorial
   accents (hero eyebrow, pull-quote). Flagged for client review. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ---------- BRAND PALETTE (from `colores acentos.png` + logo) ---------- */
  --atu-blue:        #0F4EC0;  /* Primary — logo, CTAs, links */
  --atu-blue-deep:   #0A3A94;  /* Hover / pressed */
  --atu-blue-ink:    #072767;  /* Deep ink on white, headings on cream */
  --atu-cyan:        #00C9D5;  /* Secondary — accents, highlights */
  --atu-cyan-deep:   #00A6B0;  /* Hover on cyan elements */
  --atu-yellow:      #F8C14C;  /* Warm accent — "calendar", optimism */
  --atu-yellow-soft: #FCE2A1;  /* Soft yellow surface */
  --atu-coral:       #F8624C;  /* Warm urgency — limited-time / alerts */
  --atu-coral-soft:  #FDCDC4;  /* Soft coral surface */

  /* ---------- NEUTRAL SCALE (warm off-whites → ink) ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFAF7;  /* Page background — warm off-white */
  --n-50:  #F5F3EE;  /* Cards-on-cream, subtle surface */
  --n-100: #ECE8DF;  /* Dividers on cream */
  --n-200: #DAD4C6;
  --n-300: #B9B1A0;
  --n-400: #8A8170;
  --n-500: #5F594D;
  --n-600: #3D3A33;
  --n-700: #26241F;
  --n-800: #161512;
  --n-900: #0A0907;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:              var(--n-25);       /* Page */
  --bg-raised:       var(--n-0);        /* Cards, forms */
  --bg-sunken:       var(--n-50);       /* Subtle inset blocks */
  --bg-brand:        var(--atu-blue);   /* Brand block (hero alt, footer) */
  --bg-brand-soft:   #E8F0FC;           /* Soft-blue information blocks */
  --bg-warm:         #FFF7E8;           /* Warm tint for trust / human blocks */

  /* ---------- SEMANTIC FG ---------- */
  --fg:              var(--n-800);      /* Body text */
  --fg-1:            var(--n-800);      /* Primary */
  --fg-2:            var(--n-500);      /* Secondary */
  --fg-3:            var(--n-400);      /* Tertiary / meta */
  --fg-inverse:      var(--n-0);
  --fg-brand:        var(--atu-blue);
  --fg-link:         var(--atu-blue);
  --fg-link-hover:   var(--atu-blue-deep);

  /* ---------- BORDERS ---------- */
  --border:          var(--n-100);
  --border-strong:   var(--n-200);
  --border-focus:    var(--atu-blue);
  --border-on-dark:  rgba(255,255,255,.18);

  /* ---------- STATE ---------- */
  --ok:              #1F9D55;
  --warn:            var(--atu-yellow);
  --danger:          var(--atu-coral);

  /* ---------- RADII ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm, low-alpha) ---------- */
  --shadow-sm:  0 1px 2px rgba(20, 30, 50, .06);
  --shadow-md:  0 6px 16px -4px rgba(15, 78, 192, .10), 0 2px 4px rgba(20, 30, 50, .05);
  --shadow-lg:  0 24px 48px -16px rgba(15, 78, 192, .18), 0 4px 12px rgba(20, 30, 50, .06);
  --shadow-cta: 0 10px 24px -6px rgba(248, 98, 76, .45);

  /* ---------- SPACING (4-base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif; /* Same family, heavier weight */
  --font-serif:   "DM Serif Display", Georgia, serif;          /* Editorial accent only */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SIZES (mobile-first, scales up) ---------- */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  30px;
  --t-3xl:  38px;
  --t-4xl:  48px;
  --t-5xl:  60px;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:      120ms;
  --dur-med:       220ms;
  --dur-slow:      360ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   ============================================================= */

body, .p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--fg-1);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atu-blue);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, var(--t-5xl));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--atu-blue-ink);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, var(--t-4xl));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--atu-blue-ink);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--atu-blue-ink);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--atu-blue-ink);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--atu-blue-ink);
}

.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.3;
  color: var(--atu-blue-ink);
}

.caption, small {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--fg-2);
}

.meta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

code, .code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--atu-blue-deep);
}

/* =============================================================
   UTILITY HELPERS USED ACROSS KIT
   ============================================================= */

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-6); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-4); align-items: center; }