/* ============================================================
   EISI Redesign — editorial logistics tokens
   Layered ON TOP of /colors_and_type.css (which still owns brand
   primitives). Override only what changes for the new direction.
   ============================================================ */

:root {
  /* ---------- TYPE ---------- */
  --r-font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-font-serif: 'Instrument Serif', 'Newsreader', Georgia, serif;
  --r-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- PALETTE (warm-neutral, brand kept as accents) ---------- */
  /* Dark hero palette */
  --r-night-0: #0a0908;            /* deepest, behind hero */
  --r-night-1: #141210;            /* night surface */
  --r-night-2: #1f1c19;            /* card on dark */
  --r-night-3: #2a2622;            /* hover */
  --r-night-line: #2e2a26;
  --r-cream-on-night: #f5f3f0;     /* main white-on-dark, warm */
  --r-cream-on-night-2: #b8b1a8;   /* secondary */
  --r-cream-on-night-3: #7a7269;   /* muted */

  /* Light editorial palette (rest of site) */
  --r-bone: #f5f1ea;               /* page background, very warm cream */
  --r-bone-2: #ece6dc;             /* alt section */
  --r-paper: #ffffff;              /* cards */
  --r-ink: #1a1714;                /* primary text */
  --r-ink-2: #5a544c;              /* secondary text */
  --r-ink-3: #8a8278;              /* muted */
  --r-line: #d9d2c5;               /* hairline borders */

  /* Brand (carried over, used sparingly) */
  --r-primary: #4f6ef7;            /* still the cobalt — accents only */
  --r-accent: #00d4aa;             /* verde-água — key highlight on dark */

  /* Decorative for chips/dot accents */
  --r-amber: #d97e2a;              /* sunset, warmth */
  --r-rust:  #b85a2e;

  /* ---------- TYPE SCALE — fluid, editorial-large ---------- */
  --r-fs-display: clamp(56px, 8vw, 128px);   /* hero h1 */
  --r-fs-h2:      clamp(36px, 4.5vw, 64px);  /* section h2 */
  --r-fs-h3:      clamp(22px, 2vw, 28px);
  --r-fs-lead:    clamp(17px, 1.4vw, 21px);
  --r-fs-body:    16px;
  --r-fs-sm:      14px;
  --r-fs-xs:      12px;
  --r-fs-eyebrow: 11px;

  /* ---------- LAYOUT ---------- */
  --r-page-pad-x: clamp(20px, 4vw, 64px);
  --r-section-y:  clamp(80px, 10vw, 160px);
  --r-container:  1240px;

  /* ---------- RADII ---------- */
  --r-r-xs: 4px;
  --r-r-sm: 8px;
  --r-r-md: 14px;
  --r-r-lg: 22px;
  --r-r-pill: 999px;

  /* ---------- MOTION ---------- */
  --r-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r-t: 0.4s var(--r-ease);
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--r-font-sans);
  background: var(--r-bone);
  color: var(--r-ink);
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ============================================================
   Editorial type primitives
   ============================================================ */
.r-display {
  font-size: var(--r-fs-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 500;             /* Geist 500, not black — feels more editorial */
}
.r-display em, .r-italic {
  font-family: var(--r-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.r-h2 {
  font-size: var(--r-fs-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.r-h2 em { font-family: var(--r-font-serif); font-style: italic; font-weight: 400; }
.r-h3 {
  font-size: var(--r-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.r-lead {
  font-size: var(--r-fs-lead);
  line-height: 1.5;
  color: var(--r-ink-2);
  font-weight: 400;
}
.r-eyebrow {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--r-ink-3);
  font-weight: 500;
}
.r-eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--r-accent);
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 4px rgba(0,212,170,0.18);
  animation: r-dotpulse 2.2s ease-in-out infinite;
}
@keyframes r-dotpulse {
  0%,100% { box-shadow: 0 0 0 0px rgba(0,212,170,0.30); }
  50%     { box-shadow: 0 0 0 6px rgba(0,212,170,0.00); }
}

/* On-dark variants */
.on-dark .r-eyebrow { color: var(--r-cream-on-night-2); }
.on-dark .r-lead { color: var(--r-cream-on-night-2); }
.on-dark .r-display, .on-dark .r-h2, .on-dark .r-h3 { color: var(--r-cream-on-night); }

/* ============================================================
   Buttons
   ============================================================ */
.r-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--r-r-pill);
  transition: transform var(--r-t), background var(--r-t), color var(--r-t), border-color var(--r-t);
  white-space: nowrap;
}
.r-btn .arr { width: 14px; height: 14px; transition: transform var(--r-t); }
.r-btn:hover .arr { transform: translateX(4px); }

/* primary on light */
.r-btn-dark   { background: var(--r-ink); color: var(--r-bone); }
.r-btn-dark:hover { background: #000; }

/* primary on dark */
.r-btn-light  { background: var(--r-cream-on-night); color: var(--r-night-0); }
.r-btn-light:hover { background: #fff; }

/* accent (verde-água) */
.r-btn-accent { background: var(--r-accent); color: var(--r-night-0); }
.r-btn-accent:hover { background: #1eddb6; }

/* ghost */
.r-btn-ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.r-btn-ghost:hover { opacity: 1; }

.r-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* container */
.r-container {
  width: 100%;
  max-width: var(--r-container);
  margin: 0 auto;
  padding: 0 var(--r-page-pad-x);
}

/* hairline rule */
.r-rule { height: 1px; background: var(--r-line); border: 0; }
.on-dark .r-rule { background: var(--r-night-line); }