/* ============================================================
   EL ROL DE LOS MEDIOS — Colors & Type
   Pedagogical university card game about the media ecosystem.
   Warm, editorial, hand-drawn brand. Mobile-first.
   ============================================================ */

/* ---- Webfont (substitute — see README font note) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

:root {
  /* ===== BASE COLOR TOKENS ===== */

  /* Warm earthy backgrounds */
  --sand:        #eadfcb;   /* primary page background — warm tan */
  --paper:       #fffaef;   /* lighter surface — cards, panels */
  --sand-deep:   #ddd0b5;   /* divider / pressed sand */

  /* Ink (dark accent sections + text) */
  --ink:         #0f1112;   /* near-black — dark sections & body text */
  --ink-soft:    #1b1e20;   /* raised surface on dark bg */

  /* Warm neutrals for secondary text on light */
  --stone-700:   #4a443a;   /* secondary text on light */
  --stone-500:   #6f6757;   /* muted / captions */
  --stone-400:   #9e9280;   /* subtle muted text / hints */
  --stone-300:   #b9ad96;   /* hairlines on light */

  /* Brand colors */
  --pink:        #e76488;
  --green:       #004929;
  --navy:        #194f9e;
  --yellow:      #f6ad15;

  /* Brand tints (for soft fills / chips) */
  --pink-soft:   #f7d3dd;
  --green-soft:  #cfe0d6;
  --navy-soft:   #cddcf0;
  --yellow-soft: #fbe4ac;

  /* Color on dark sections */
  --on-ink:      #fffaef;   /* text on ink */
  --on-ink-mute: #b6b1a6;   /* muted text on ink */

  /* ===== SEMANTIC COLOR ===== */
  --bg:          var(--sand);
  --surface:     var(--paper);
  --fg:          var(--ink);
  --fg-2:        var(--stone-700);
  --fg-3:        var(--stone-500);
  --hairline:    var(--stone-300);
  --accent:      var(--pink);

  /* ===== TYPE FAMILIES ===== */
  --font-sans:   'Archivo', system-ui, -apple-system, sans-serif;
  /* The hand-drawn wordmark lives only as an SVG asset (assets/logo-*.svg) */

  /* ===== TYPE SCALE (mobile-first, fluid) ===== */
  --t-display: clamp(2.75rem, 9vw, 5rem);    /* hero */
  --t-h1:      clamp(2.1rem, 6.5vw, 3.5rem);
  --t-h2:      clamp(1.6rem, 4.5vw, 2.4rem);
  --t-h3:      clamp(1.2rem, 3vw, 1.5rem);
  --t-lead:    clamp(1.1rem, 2.4vw, 1.375rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.9375rem;   /* 15px */
  --t-eyebrow: 0.8125rem;   /* 13px — uppercase label */

  /* ===== WEIGHTS ===== */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   900;

  /* ===== RADII ===== */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill:999px;

  /* ===== SPACING (8pt-ish, warm rhythm) ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ===== SHADOWS (soft, warm, low) ===== */
  --shadow-sm: 0 1px 2px rgba(15,17,18,.06);
  --shadow-md: 0 6px 20px rgba(15,17,18,.08);
  --shadow-lg: 0 16px 40px rgba(15,17,18,.12);
  /* "lifted card" — flat offset, editorial sticker feel */
  --shadow-card: 4px 4px 0 var(--ink);

  /* ===== BORDERS ===== */
  --border-ink: 2px solid var(--ink);
  --border-hair:1px solid var(--hairline);

  /* ===== GAME METRICS ===== */
  --cred:       #378ADD;   /* Credibilidad */
  --vis:        #EF9F27;   /* Visibilidad */
  --com:        #1D9E75;   /* Comunidad */
  --cred-soft:  #d0e5f7;
  --vis-soft:   #fce7be;
  --com-soft:   #c4e8dc;

  --container: 1120px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (reference defaults)
   ============================================================ */
.erm-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.erm-display {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--t-display);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--fg);
}
.erm-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--fg);
}
.erm-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--fg);
}
.erm-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--fg);
}
.erm-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-2);
}
.erm-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-2);
}
.erm-small {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-3);
}