/* ==========================================================================
   Andri Rivera — Design Tokens
   Dark charcoal + off-white + one warm amber accent. Inter only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800&display=swap');

/* If serving offline, drop Inter.var.woff2 into /fonts/ and uncomment:
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/Inter.var.woff2') format('woff2');
}
*/

:root {
  /* ---------- Color: base palette ---------- */
  --ink-900:      #2C365A;   /* Deep Ocean navy */
  --ink-800:      #2C365A;   /* unified dark surface */
  --bone:         #EEE8DF;   /* Cream */
  --mint:         #EEE8DF;   /* accent on dark — Cream */
  --amber:        #EEE8DF;   /* CTA pill — Cream */
  --amber-press:  #D8D2C9;   /* pressed Cream */

  /* ---------- Color: semantic ---------- */
  --bg-hero:          var(--ink-900);
  --bg-dark:          var(--ink-800);
  --bg-light:         var(--bone);

  --fg-on-dark:       var(--bone);
  --fg-on-dark-muted: rgba(247, 244, 239, 0.60);
  --fg-on-light:      var(--ink-900);
  --fg-on-light-muted:rgba(21, 21, 21, 0.55);

  --rule-on-dark:     rgba(247, 244, 239, 0.12);
  --rule-on-light:    rgba(21, 21, 21, 0.12);

  --accent:           var(--amber);
  --accent-press:     var(--amber-press);

  /* ---------- Type ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-bold:      700;
  --fw-black:     800;

  /* Type scale — values used by the semantic classes below */
  --t-hero:     clamp(72px, 12vw, 200px);
  --t-section:  56px;
  --t-manifesto:clamp(40px, 6vw, 88px);
  --t-lead:     22px;
  --t-body:     18px;
  --t-caption:  13px;
  --t-stat:     clamp(72px, 10vw, 144px);

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-body:    1.6;

  --track-tightest: -0.04em;
  --track-tighter:  -0.03em;
  --track-tight:    -0.02em;
  --track-caption:  0.12em;
  --track-button:   0.02em;

  /* ---------- Spacing (8px base) ---------- */
  --sp-1:   8px;
  --sp-2:   16px;
  --sp-3:   24px;
  --sp-4:   32px;
  --sp-5:   48px;
  --sp-6:   64px;
  --sp-7:   96px;
  --sp-8:   120px;   /* section vertical rhythm, desktop */
  --sp-9:   160px;

  --section-pad-y:        var(--sp-8);
  --section-pad-y-mobile: 72px;

  /* ---------- Layout widths ---------- */
  --w-page:      1240px;
  --w-manifesto: 1040px;
  --w-prose:     680px;
  --gutter:      24px;

  /* ---------- Radii (only two) ---------- */
  --r-pill:  999px;
  --r-none:  0;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:   200ms;
  --t-med:    400ms;
  --t-slow:   600ms;
}

/* ==========================================================================
   Semantic element styles
   ========================================================================== */

html, body {
  background: var(--bg-light);
  color: var(--fg-on-light);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero logotype — reserved for "ANDRI RIVERA" */
.t-hero,
h1.t-hero {
  font-size: var(--t-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tightest);
  text-transform: uppercase;
  margin: 0;
}

/* Section label — THE PROBLEM / HOW IT WORKS / etc */
.t-section,
h2.t-section {
  font-size: var(--t-section);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

/* Manifesto line */
.t-manifesto {
  font-size: var(--t-manifesto);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

/* Stat numeral — mint accent */
.t-stat {
  font-size: var(--t-stat);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tighter);
  color: var(--mint);
  margin: 0;
}

/* Lead paragraph */
.t-lead,
p.t-lead {
  font-size: var(--t-lead);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  margin: 0;
}

/* Body copy */
.t-body,
p {
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

/* Caption / eyebrow / trust strip */
.t-caption {
  font-size: var(--t-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  line-height: 1;
}

/* ==========================================================================
   Primary CTA — "Book a call" is the only button
   ========================================================================== */

.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-button);
  text-decoration: none;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.btn-book:hover  { transform: translateY(-2px); color: #0A0A0A; }
.btn-book:active { transform: translateY(0);    background: var(--accent-press); }
.btn-book:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 4px;
}

/* Links */
a { color: inherit; text-decoration: none; transition: opacity var(--t-fast) var(--ease-out); }
a:hover { opacity: 0.6; }

/* Section rhythm */
.section {
  padding: var(--section-pad-y) var(--gutter);
}
.section--dark  { background: var(--bg-dark);  color: var(--fg-on-dark); }
.section--hero  { background: var(--bg-hero);  color: var(--fg-on-dark); }
.section--light { background: var(--bg-light); color: var(--fg-on-light); }

.container {
  max-width: var(--w-page);
  margin: 0 auto;
}

/* Rule lines */
.rule-dark  { border: 0; border-top: 1px solid var(--rule-on-dark);  margin: 0; }
.rule-light { border: 0; border-top: 1px solid var(--rule-on-light); margin: 0; }

/* Fade-in-on-scroll primitives */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.reveal-left.is-in { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.reveal-right.is-in { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.96) translateY(12px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
}
.reveal-scale.is-in { opacity: 1; transform: none; }

/* Graph-paper grid on light sections */
.bg-grid {
  background-image:
    linear-gradient(rgba(44,54,90,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,54,90,0.14) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Card interaction */
.card-lift {
  transition: transform 240ms cubic-bezier(0.2,0.6,0.2,1),
              box-shadow 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(44,54,90,0.13);
}

@media (max-width: 720px) {
  :root { --section-pad-y: var(--section-pad-y-mobile); }
  .t-section { font-size: 40px; }
}