/* ───────────────────────────────────────────────────────────
   TOKENS DE PÁGINA
   Los colores de marca (--brand-*) y fuentes (--font-*) se inyectan
   desde src/content/brand.js. Aquí viven las decisiones editoriales.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Fallbacks por si el JS aún no ha inyectado los tokens de marca */
  --brand-primary: #00142a;
  --brand-accent: #0166fd;
  --brand-smile: #0134f4;
  --brand-sky: #b8d7fe;
  --brand-white: #ffffff;
  --brand-ink: #32385f;
  --brand-sun: #fcf386;
  --brand-blush: #eed3f7;
  --brand-azure: #1d88fc;
  --state-happy: #1fbf75;
  --state-flat: #9aa3b2;
  --state-angry: #f24b3f;
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Superficies de la página */
  --paper: #fbfaf7;
  --paper-2: #f3f1ec;
  --ink: var(--brand-primary);
  --ink-soft: rgba(0, 20, 42, 0.62);
  --ink-faint: rgba(0, 20, 42, 0.36);
  --rule: rgba(0, 20, 42, 0.12);

  --dark: var(--brand-primary);
  --dark-2: #0a2448;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.68);
  --on-dark-faint: rgba(255, 255, 255, 0.4);
  --rule-dark: rgba(255, 255, 255, 0.14);

  /* Layout */
  --container: 1440px;
  --gutter: clamp(20px, 5vw, 96px);
  --section: clamp(96px, 11vw, 200px);
  --block: clamp(56px, 6vw, 120px);
  --gap: clamp(12px, 1.5vw, 24px);
  --gap-lg: clamp(20px, 2.5vw, 40px);

  /* Radios (los de marca se inyectan como --radius-md, etc.) */
  --r-media: clamp(14px, 1.6vw, 24px);
  --r-tile: clamp(16px, 2vw, 32px);

  /* Tipo */
  --fs-display: clamp(40px, 5.4vw, 100px);
  --fs-h2: clamp(34px, 4vw, 68px);
  --fs-h3: clamp(24px, 2.1vw, 36px);
  --fs-statement: clamp(26px, 2.8vw, 48px);
  --fs-body-lg: clamp(17px, 1.2vw, 21px);
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-label: 11px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 900ms;
  --dur-fast: 220ms;
}