/* M2 — esmeralda sólida, 2026-08-30.
 * Fonte executável do design system; contrato em agentes/BRAND.md.
 * Escopo M2. Não carregar nem propagar aos pitches Intex.
 * O gradiente é exclusivo de fios, costuras e nós pequenos.
 */
:root {
  --m2-ink: #06170F;
  --m2-on-light: #0E241A;
  --m2-on-dark: #E9F6EE;
  --m2-leaf: #F2F6EF;
  --m2-mist: #E9F6EE;
  --m2-card-light: #FBFCF8;

  --m2-emerald: #00B85C;
  --m2-emerald-on-light: #05793C;
  --m2-glow: #00D96B;
  --m2-on-emerald: var(--m2-ink);
  --m2-layer-deep: #0A2E1C;
  --m2-layer: #0D3A24;
  --m2-layer-open: #145238;
  --m2-on-layer-open: var(--m2-mist);
  --m2-accent-on-layer-open: var(--m2-glow);

  --m2-muted-on-light: #4A574E;
  --m2-muted-on-dark: #A6DCC0;
  --m2-caption-on-dark: #8FC3A6;
  --m2-border-on-light: #DDE4DC;
  --m2-border-on-dark: rgba(233, 246, 238, 0.16);

  --m2-logo-on-dark: var(--m2-emerald);
  --m2-logo-on-light: var(--m2-emerald-on-light);
  --m2-logo-on-emerald: var(--m2-ink);
  --m2-logo-ratio: 116 / 50;
  --m2-logo-min-height: 18px;

  --m2-font-display: "Space Grotesk", system-ui, sans-serif;
  --m2-font-body: "Instrument Sans", system-ui, sans-serif;
  --m2-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --m2-display-weight: 700;
  --m2-display-tracking: -0.04em;
  --m2-body-weight: 400;
  --m2-label-weight: 500;
  --m2-number-weight: 600;
  --m2-label-tracking: 0.16em;

  /* Escolher o foco pelo fundo real; não depender apenas da cor. */
  --m2-focus-on-dark: var(--m2-glow);
  --m2-focus-on-light: var(--m2-emerald-on-light);
  --m2-focus-on-emerald: var(--m2-ink);
  --m2-focus-width: 3px;
  --m2-focus-offset: 4px;
  --m2-focus-style: solid;

  --m2-thread-start: #007A45;
  --m2-thread-end: #00D96B;
  --m2-thread: linear-gradient(90deg, var(--m2-thread-start), var(--m2-thread-end));
  --m2-thread-width: 2px;
  --m2-thread-node-size: 12px;
  --m2-cut-corner: 18px;
  --m2-risca-angle: 115deg;
  --m2-risca-width: 1px;
  --m2-risca-step: 8px;
  --m2-risca-opacity: 0.04;
  --m2-risca-opacity-max: 0.09;

  /* Papel e Ouro — evolução de 2026-09-18 para o webapp (contrato em BRAND.md).
   * Superfícies claras saem do verde-claríssimo para um creme de papel; a cor
   * secundária é um ouro saturado. Nenhum tom pastel entra como superfície. */
  --m2-paper: #FAF8F3;
  --m2-paper-deep: #F3EFE6;
  --m2-card-paper: #FEFDFA;
  --m2-border-on-paper: #E4DED0;
  --m2-muted-on-dark-warm: #CBC6B6;
  --m2-caption-on-dark-warm: #A9A594;
  --m2-secondary: #B8893E;
  --m2-secondary-strong: #C79A50;
  --m2-secondary-bright: #DDA02B;
  /* Gradientes de botão (2026-09-19): nos dois, o tom claro ocupa mais área
   * (o escuro abre à esquerda e o claro domina a partir de 58%). */
  --m2-cotacao-inicio: #00A058; /* início suavizado: texto Tinta fica em 5,4:1 (no #007A45 do Fio ficava em 3,9:1) */
  --m2-grad-cotacao: linear-gradient(90deg, var(--m2-cotacao-inicio) 0%, var(--m2-thread-end) 58%);
  --m2-grad-ouro: linear-gradient(90deg, var(--m2-secondary) 0%, var(--m2-secondary-bright) 58%);
  --m2-secondary-on-light: #7E5208;
  --m2-secondary-tint: #F4EDDF;
  --m2-paper-verde: #EEF5EF;
  --m2-paper-verde-deep: #E3EEE5;
  --m2-on-secondary: var(--m2-ink);

  /* Ações: a Seta M2 (fina, esticada na diagonal ↗) é a única seta de ação
   * e fica depois do texto. Vetor: marca/M2_Seta_Diagonal.svg; contrato em BRAND.md. */
  --m2-arrow-size: 1.3em;
  --m2-arrow-stroke: 1.25;
  --m2-radius-pill: 99px;

  --m2-stage-width: 1920px;
  --m2-stage-height: 1080px;
  --m2-slide-margin: 100px;
  --m2-radius-card: 16px;
  --m2-space-unit: 8px;

  --m2-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m2-motion-control: 160ms;
  --m2-motion-slide: 620ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --m2-motion-control: 0ms;
    --m2-motion-slide: 0ms;
  }
}