/*
 * Tivra — Design tokens
 * ─────────────────────
 * Tudo o que é transversal à página vive aqui. O `:root` é a única
 * fonte de verdade. Os componentes (`.btn`, `.card`, etc.) lêem estas
 * variáveis; nunca hardcodam valores.
 *
 * Os valores foram extraídos da página inicial. Antes de os
 * alterares, procura onde são usados (grep) — a página assume-os.
 *
 * Secções:
 *   1. Color: spectrum     (acento & agents)
 *   2. Color: surface      (fundos, separadores)
 *   3. Color: text         (texto principal, secundário, desativado)
 *   4. Typography          (famílias, tamanhos, alturas-de-linha)
 *   5. Spacing             (escala extraída das recorrências)
 *   6. Radii               (cantos)
 *   7. Layout              (largura de contentor, gutter)
 *   8. Motion              (durações)
 */

:root {
  /* ── 1. Color: spectrum ───────────────────────────────────────
     Os 7 tons do espetro Tivra. `--a1` e `--a2` são as cores
     primárias da marca; `--a3..--a7` identificam os agents no
     companion. São também o conic gradient do featured card. */
  --a1: #FF7F11;   /* Tivra    · laranja  */
  --a2: #680393;   /* Contas   · roxo     */
  --a3: #EC5626;   /* Escrita  · coral    */
  --a4: #D82C3B;   /* Código   · carmim   */
  --a5: #A01867;   /* Design   · magenta  */
  --a6: #3E45B2;   /* Agenda   · indigo   */
  --a7: #067BC2;   /* Notas    · azul     */

  /* ── 2. Color: surface ──────────────────────────────────────── */
  --black: #000;
  --card:  #070707;   /* fundo dos cards do bento  */
  --line:  #1A1A1A;   /* separadores              */
  --grain: #0a0a0a;   /* fundo do bloco "cmd"     */

  /* ── 3. Color: text ────────────────────────────────────────────
     4 níveis de cinza-claro, do mais alto (texto principal) ao
     mais baixo (silenciado). Não inclui branco puro — a página
     assume sempre o `--text` como o "branco" do sistema. */
  --text:   #E6EBF1;  /* texto principal           */
  --text-2: #d0d4db;  /* lead (subtítulo da hero)  */
  --text-3: #c8c8c8;  /* h2 dentro de card         */
  --text-4: #b7bcc4;  /* body dentro de card       */
  --mute:   #8B95A5;  /* nav, captions, "em breve" */
  --mute-2: #5a5a5a;  /* ícone de card desativado  */

  /* ── 4. Typography ─────────────────────────────────────────────
     Duas famílias: Michroma (display, sempre uppercase com
     tracking) e Raleway (corpo). Os tamanhos do display e h1
     são responsivos via `clamp`. */
  --head: "Michroma", sans-serif;
  --body: "Raleway", sans-serif;

  --size-display: clamp(28px, 5vw, 52px);
  --size-h1:      clamp(18px, 2.2vw, 26px);
  --size-h2:      12px;
  --size-lead:    20px;
  --size-body:    17px;
  --size-caption: 12px;

  --lh-display: 1.22;
  --lh-h1:      1.35;
  --lh-lead:    1.55;
  --lh-body:    1.6;

  --tracking-display: 0.05em;
  --tracking-h1:      0.08em;
  --tracking-h2:      0.18em;
  --tracking-eyebrow: 0.16em;  /* btn, card.act */

  /* ── 5. Spacing ────────────────────────────────────────────────
     Escala extraída dos valores que efectivamente aparecem na
     página. NÃO foi normalizada para uma escala "bonita" — se
     arredondares, a página muda de posição 1-2px. Decidir com
     calma. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-12: 72px;
  --space-14: 80px;
  --space-20: 160px;

  /* ── 6. Radii ──────────────────────────────────────────────────
     A página é quase toda `border-radius: 0` por design. Os
     raios positivos vivem nos mocks (janela macOS, círculo do
     avatar) e nos pills/burbujas. */
  --radius-0:    0;
  --radius-sm:   4px;   /* mac-run dot                  */
  --radius-md:  12px;   /* janela macOS                 */
  --radius-lg:  18px;   /* bubble-me / bubble-bot       */
  --radius-xl:  20px;   /* ios-field                    */
  --radius-full: 50%;

  /* ── 7. Layout ───────────────────────────────────────────────── */
  --container-max: 1180px;
  --gutter:        28px;

  /* ── 8. Motion ───────────────────────────────────────────────── */
  --ease:      ease-in-out;
  --dur-fast:  200ms;
  --dur-med:   500ms;
  --wav-cycle: 0.7s;   /* animação da onda no mic do iOS */
}

/* ── Breakpoint único (extracto do media query da página) ────
   Existe só para o `@media` que o `index.html` precisa. Trazer
   mais breakpoints aqui quando houver motivo. */
:root {
  --bp-md-down: 900px;
}

@media (max-width: 900px) {
  :root {
    /* override do token aqui, se necessário no futuro */
  }
}