/* THE SHADOW — design tokens
   Colors + fonts: from the-shadow-landing.html. Geometry/components: Pinterest-style system. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Caveat&family=Homemade+Apple&family=Playfair+Display:ital,wght@0,600;0,700;1,500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  /* Brand */
  --red: #ba2627;
  --red-pressed: #9c1f20;
  --blue: #4269aa;
  --blue-pressed: #2d4a7e;
  /* Surfaces */
  --paper: #f3f1ea;
  --cream: #ecece0;
  --newsprint: #d8d5cc;
  --tint-red: #f1dedb;
  --tint-blue: #dce4f1;
  /* Text & lines */
  --ink: #1d1b1a;
  --newsprint-ink: #3a3835;
  --muted: #5f5a55;
  --rule: #cfcabd;
  /* Accents (sparingly) */
  --gold: #d9a92b;
  --green: #5a9a62;
  --focus: #4269aa;

  /* Type */
  --display: "Anton", Impact, sans-serif;
  --editorial: "Playfair Display", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --label: "Archivo", system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --sign: "Homemade Apple", cursive;

  /* Shape: 3 radii only */
  --r-md: 16px;
  --r-lg: 32px;
  --r-full: 9999px;

  /* Spacing */
  --s-xxs: 4px; --s-xs: 6px; --s-sm: 8px; --s-md: 12px;
  --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px; --s-section: 64px;
  --max: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--body); }

/* Type scale */
.t-display { font: 400 clamp(44px, 9vw, 88px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.t-h1 { font: 700 44px/1.15 var(--editorial); letter-spacing: -.8px; }
.t-h2 { font: 700 28px/1.2 var(--editorial); letter-spacing: -.4px; }
.t-h3 { font: 600 20px/1.3 var(--label); }
.t-body { font: 400 17px/1.5 var(--body); }
.t-label { font: 700 12px/1 var(--label); text-transform: uppercase; letter-spacing: 1.4px; }
.t-sign { font: 400 22px/1.3 var(--sign); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-md); font: 700 14px/1 var(--label); cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:active { background: var(--red-pressed); }
.btn-secondary { background: var(--newsprint); color: var(--ink); }
.btn-secondary:active { background: var(--rule); }
.btn-blue { background: var(--blue); color: var(--cream); }
.btn-blue:active { background: var(--blue-pressed); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn:focus-visible, .input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 4px var(--focus); }

/* Chips & pills */
.chip { display: inline-block; padding: 8px 16px; border-radius: var(--r-full); background: var(--cream); color: var(--ink); font: 700 14px/1 var(--label); }
.chip.is-active { background: var(--ink); color: var(--paper); }
.pill { display: inline-block; padding: 6px 12px; border-radius: var(--r-full); background: var(--paper); color: var(--ink); font: 700 12px/1 var(--label); }

/* Inputs */
.input { width: 100%; height: 44px; padding: 11px 15px; border: 1px solid var(--muted); border-radius: var(--r-md);
  background: #fff; font: 400 16px/1.4 var(--body); color: var(--ink); }

/* Cards (flat, no shadows) */
.card { background: var(--cream); border-radius: var(--r-md); padding: var(--s-xxl); }
.card-lg { border-radius: var(--r-lg); }
.card-white { background: #fff; }
.card-red { background: var(--red); color: var(--cream); }
.card-blue { background: var(--blue); color: var(--cream); }
.card-tint-red { background: var(--tint-red); }
.card-tint-blue { background: var(--tint-blue); }

/* Layout */
.container { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.section { padding: var(--s-section) 0; }
.grid { display: grid; gap: var(--s-sm); }
.narrow { max-width: 780px; margin-inline: auto; }   /* columna estrecha: SIEMPRE centrada */
.measure { max-width: 34em; }                         /* ancho de lectura: párrafos bajo un título, alineados a la izquierda */
@media (max-width: 768px) { .section { padding: 48px 0; } .t-h1 { font-size: 34px; } }