/* ============================================================
   Make it Real — Design tokens
   Motivo condutor: a marca é feita de camadas. O site também.
   ============================================================ */

:root {
  /* --- Tinta ------------------------------------------------ */
  --ink-000: #000000;
  --ink-900: #08090a;
  --ink-850: #0c0e10;
  --ink-800: #111316;
  --ink-700: #16191d;
  --ink-600: #1d2126;
  --line:    #24292f;
  --line-2:  #2f353d;

  /* --- Papel ------------------------------------------------ */
  --paper:      #f2f3f5;
  --paper-dim:  #b9bec5;
  --paper-mute: #7d838c;
  --gray-brand: #909090;

  /* --- Camadas da marca (extraídas do logotipo) -------------- */
  --l-orange:  #ff6200;
  --l-lime:    #b8d400;
  --l-green:   #00af4c;
  --l-magenta: #ff0074;
  --l-blue:    #0094fe;

  /* --- Tipografia ------------------------------------------- */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --f-body:    "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  --f-mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* escala fluida */
  --t-mega:  clamp(3.2rem, 11.5vw, 12.5rem);
  --t-h1:    clamp(2.4rem, 5.5vw, 4.9rem);
  --t-h2:    clamp(2rem, 4.6vw, 3.9rem);
  --t-h3:    clamp(1.35rem, 2.1vw, 1.85rem);
  --t-lead:  clamp(1.05rem, 1.5vw, 1.35rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-label: 0.6875rem;
  --t-micro: 0.625rem;

  /* --- Ritmo ------------------------------------------------ */
  --gut:     clamp(1.25rem, 4vw, 3.5rem);
  --sec-y:   clamp(5rem, 11vw, 10.5rem);
  --maxw:    1360px;
  --maxw-txt: 62ch;

  /* --- Camada física (a "altura de camada" do site) ---------- */
  --layer-h: 9px;
  --layer-r: 999px;

  /* O site e escuro por natureza. Isto faz o navegador desenhar os controles
     nativos (lista do select, scrollbar, autofill) na mesma tinta. */
  color-scheme: dark;

  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* O site é escuro por natureza — é uma mesa de impressão.
   Respeitamos apenas quem pede menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}