/* ============================================================
   CEIPEM — Fundación 171 Emergencia
   Design System · Color & Type Tokens
   ------------------------------------------------------------
   Brand DNA: emergency-medicine training. Star-of-Life blue +
   urgent red on a clean clinical white/slate field. Authority,
   trust, urgency, clarity under pressure.
   ============================================================ */

/* ---- Webfonts (Google Fonts CDN substitution — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     1. BRAND CORE
     ============================================================ */
  --ceipem-blue: #0080C0;   /* Star of Life blue — primary */
  --ceipem-red:  #E81E2D;   /* Emergency red — accent / alert */
  --ceipem-white:#FFFFFF;

  /* ============================================================
     2. PRIMARY — Emergency Blue scale
     ============================================================ */
  --blue-50:  #E8F4FB;
  --blue-100: #C6E5F4;
  --blue-200: #8FCDEA;
  --blue-300: #4FB0DD;
  --blue-400: #1F95D1;
  --blue-500: #0080C0;   /* brand */
  --blue-600: #00689E;
  --blue-700: #005481;
  --blue-800: #0A4566;
  --blue-900: #0D3650;
  --blue-950: #082234;

  /* ============================================================
     3. ACCENT — Emergency Red scale
     ============================================================ */
  --red-50:  #FDECEC;
  --red-100: #FBD0D2;
  --red-200: #F6A4A8;
  --red-300: #F06F76;
  --red-400: #EC4450;
  --red-500: #E81E2D;   /* brand */
  --red-600: #C8131F;
  --red-700: #A20E18;
  --red-800: #7C0E16;
  --red-900: #5C1014;

  /* ============================================================
     4. NEUTRALS — clinical cool slate
     ============================================================ */
  --slate-0:   #FFFFFF;
  --slate-25:  #FAFBFC;
  --slate-50:  #F4F6F8;
  --slate-100: #E9EDF1;
  --slate-200: #D6DDE4;
  --slate-300: #B6C1CC;
  --slate-400: #8694A2;
  --slate-500: #647284;
  --slate-600: #4B5868;
  --slate-700: #374252;
  --slate-800: #232C39;
  --slate-900: #151C26;
  --slate-950: #0C1119;

  /* ============================================================
     5. SEMANTIC / STATUS
     ============================================================ */
  --success:   #1E9E5A;
  --success-bg:#E6F5EC;
  --warning:   #E08600;
  --warning-bg:#FCF1DD;
  --danger:    #E81E2D;   /* == brand red */
  --danger-bg: #FDECEC;
  --info:      #0080C0;
  --info-bg:   #E8F4FB;

  /* ============================================================
     6. SURFACE / TEXT ROLES
     ============================================================ */
  --bg:         var(--slate-25);
  --bg-elevated:var(--slate-0);
  --bg-sunken:  var(--slate-50);
  --bg-brand:   var(--blue-900);   /* hero / dark sections */
  --bg-brand-strong: var(--blue-950);

  --fg1: var(--slate-900);   /* primary text */
  --fg2: var(--slate-600);   /* secondary text */
  --fg3: var(--slate-400);   /* muted / captions */
  --fg-on-brand: #FFFFFF;
  --fg-on-brand-dim: rgba(255,255,255,0.72);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-brand:  var(--blue-500);

  --link:       var(--blue-600);
  --link-hover: var(--blue-700);

  /* ============================================================
     7. TYPE FAMILIES
     ============================================================ */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-sans:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale (1.250 major-third, 16px base) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;
  --text-5xl:  61px;
  --text-6xl:  76px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;   /* uppercase eyebrows / labels */

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

  /* ============================================================
     9. RADII
     ============================================================ */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     10. SHADOWS / ELEVATION
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(13,54,80,0.06);
  --shadow-sm: 0 1px 3px rgba(13,54,80,0.08), 0 1px 2px rgba(13,54,80,0.06);
  --shadow-md: 0 4px 12px rgba(13,54,80,0.10), 0 2px 4px rgba(13,54,80,0.06);
  --shadow-lg: 0 12px 28px rgba(13,54,80,0.14), 0 4px 8px rgba(13,54,80,0.06);
  --shadow-xl: 0 24px 48px rgba(13,54,80,0.18);
  --shadow-brand: 0 8px 24px rgba(0,128,192,0.28);
  --shadow-red:   0 8px 22px rgba(232,30,45,0.30);

  /* ============================================================
     11. MISC
     ============================================================ */
  --ring-focus: 0 0 0 3px rgba(0,128,192,0.35);
  --transition-fast: 120ms cubic-bezier(0.4,0,0.2,1);
  --transition: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 360ms cubic-bezier(0.22,1,0.36,1);
  --container: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply .ceipem-type to a wrapper (or :root) to opt in.
   ============================================================ */
.ceipem-type {
  font-family: var(--font-sans);
  color: var(--fg1);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ceipem-type h1, .ceipem-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg1);
}
.ceipem-type h2, .ceipem-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--fg1);
}
.ceipem-type h3, .ceipem-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.ceipem-type h4, .ceipem-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.ceipem-type p, .ceipem-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
}
.ceipem-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.ceipem-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ceipem-red);
}
.ceipem-code, .ceipem-type code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  background: var(--slate-100);
  color: var(--blue-700);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.ceipem-type a { color: var(--link); text-decoration: none; }
.ceipem-type a:hover { color: var(--link-hover); text-decoration: underline; }