/*
 * Violet Noir — o sistema Violet da Medvoice virado sobre o escuro.
 *
 * As cores claras (--lav, --ink, --violet-*) são exatamente os tokens de
 * `packages/ui/src/tokens/tokens.ts`. Se um valor divergir, o token vence: é ele
 * que a PWA renderiza, e a landing existe para parecer o produto, não o
 * contrário. O que é novo aqui são apenas os fundos escuros, derivados do
 * `ink` (#1B1230) escurecendo em direção ao preto — a landing é a mesma marca à
 * noite.
 */

:root {
  /* --- fundos escuros (novos, derivados do ink) ---------------------------- */
  --void: #07040f;
  --night: #0c0718;
  --surface: #140d26;
  --surface-2: #1b1230;
  --surface-3: #241a3d;

  /* --- tokens Violet, verbatim -------------------------------------------- */
  --violet: #b59fe3;
  --violet-deep: #8b6fd4;
  --violet-dark: #6f4fbf;
  --violet-tint: #f0e6f9;
  --violet-soft: #e8ddf6;
  --blush: #e8a7c4;
  --lav: #ece2f5;
  --lav-2: #dcc5f0;
  --paper: #ffffff;
  --ink: #1b1230;
  --ink-2: #4d4360;
  --ink-3: #8a8294;
  --danger: #c5547b;
  --ok: #3fae7a;

  /* --- texto sobre o escuro ------------------------------------------------ */
  --text: #f5f0fb;
  --text-2: #b7abd0;
  --text-3: #7b7192;

  /* --- linhas -------------------------------------------------------------- */
  --line: rgba(236, 226, 245, 0.09);
  --line-2: rgba(236, 226, 245, 0.18);
  --line-ink: rgba(27, 18, 48, 0.1);

  /* --- tipografia ---------------------------------------------------------- */
  --ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- ritmo --------------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1240px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- movimento ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* `overflow-x` mora aqui, e não no `body`: no body ele **propaga** para a
     viewport e o próprio body passa a computar `visible`, então não clipa nada.
     `clip` e não `hidden` de propósito — `hidden` criaria um contêiner de
     rolagem e quebraria o `position: sticky` do aparelho. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* O cabeçalho é fixo: âncoras param abaixo dele, não atrás. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* O flash cinza do toque no iOS não combina com nada aqui; os estados de
     toque são desenhados por `:active`, abaixo. */
  -webkit-tap-highlight-color: transparent;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--violet-dark);
  color: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--violet-deep);
  color: var(--paper);
  border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip:focus {
  transform: translateY(0);
}

/* ----------------------------------------------------------- tipografia -- */

.display {
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  text-wrap: balance;
}

.h2 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-size: clamp(1.95rem, 4.1vw, 3.3rem);
  text-wrap: balance;
}

.h3 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.body {
  color: var(--text-2);
  text-wrap: pretty;
}

.mono {
  font-family: var(--mono);
  font-size: 0.688rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* O olho-de-seção numerado: `03 · IA no DNA`. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
}

.eyebrow b {
  color: var(--violet);
  font-weight: 500;
}

.eyebrow::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.accent {
  color: var(--violet);
}

/* A pincelada do HyperBoost: uma tarja que cresce por baixo da frase-chave. */
.swipe {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.swipe::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.04em;
  height: 0.13em;
  background: linear-gradient(90deg, var(--violet-dark), var(--violet-deep));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease) 0.45s;
}

.is-in .swipe::after,
.swipe.is-in::after {
  transform: scaleX(1);
}

/* Envelope transitório das palavras durante a medição da quebra de linha. */
.split-word {
  display: inline;
}