/* Base comum dos três protótipos da landing: os tokens do Fairleaf (scritor/app/styles/tokens.css). */

:root {
  --paper: oklch(95.9% 0.014 85);
  --paper-2: oklch(93.9% 0.019 83);
  --paper-3: oklch(90.8% 0.03 81);
  --page: oklch(98% 0.009 85);
  --ink: oklch(21.9% 0.007 78);
  --ink-2: oklch(38.7% 0.016 71);
  --muted: oklch(48.5% 0.023 70);
  --rule: oklch(86.5% 0.03 81);
  --accent: oklch(52.1% 0.158 30);
  --accent-strong: oklch(45.5% 0.15 30);
  --accent-soft: oklch(92.2% 0.023 46);
  --on-accent: oklch(98% 0.009 85);
  --display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --ui: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: oklch(19% 0.008 70); --paper-2: oklch(22% 0.01 70); --paper-3: oklch(26% 0.012 70); --page: oklch(23.5% 0.01 70);
    --ink: oklch(93% 0.012 85); --ink-2: oklch(82% 0.015 80); --muted: oklch(70% 0.02 75); --rule: oklch(33% 0.015 70);
    --accent: oklch(66% 0.15 35); --accent-strong: oklch(72% 0.14 38); --accent-soft: oklch(30% 0.05 35); --on-accent: oklch(18% 0.01 70);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: oklch(19% 0.008 70); --paper-2: oklch(22% 0.01 70); --paper-3: oklch(26% 0.012 70); --page: oklch(23.5% 0.01 70);
  --ink: oklch(93% 0.012 85); --ink-2: oklch(82% 0.015 80); --muted: oklch(70% 0.02 75); --rule: oklch(33% 0.015 70);
  --accent: oklch(66% 0.15 35); --accent-strong: oklch(72% 0.14 38); --accent-soft: oklch(30% 0.05 35); --on-accent: oklch(18% 0.01 70);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--ui); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong); }
.btn--quiet { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn--quiet:hover { border-color: var(--ink-2); }

.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 21px; text-decoration: none; color: var(--ink); }
.brand svg { width: 24px; height: 24px; color: var(--accent); }

/* Entrada dos elementos quando a abertura termina. */
.rise { opacity: 0; transform: translateY(18px); }
body.is-ready .rise { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
/* E os que entram ao rolar. */
.on-scroll { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.on-scroll.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
}