/* ==========================================================================
   Tokens da Black da MedMax VIVA (paleta e tipografia do moodboard oficial)
   Página escura por definição da campanha: um tema só, cores sempre explícitas.
   Layout: mobile first; colunas a partir de 720px, hero em 2 colunas a partir de 1040px.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Cores oficiais */
  --ink: #0A0A0A;          /* Preto */
  --graphite: #1C1C1C;     /* Grafite */
  --paper: #F4F1EA;        /* Off-white */
  --orange: #FC5B00;       /* Laranja VIVA */
  --green: #03B152;        /* Verde MedMax */

  /* Derivadas */
  --card: #141414;
  --card-raised: #191919;
  --line: #2A2A2A;
  --field: #0D0D0D;
  --text-soft: #D9D5CC;
  --muted: #A8A49C;
  --muted-2: #77736B;
  --danger: #FF8A7A;
  --green-glow: rgba(3, 177, 82, .22);
  --orange-glow: rgba(252, 91, 0, .22);

  --accent: var(--green);
  --on-accent: var(--ink);

  /* Tipografia */
  --f-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --stretch-condensed: 62%;  /* Archivo Condensed: títulos */
  --stretch-wide: 125%;      /* Archivo Expanded: fita, botões, saudação */

  /* Forma e ritmo */
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 14px;
  --gutter: 20px;
  --max: 1200px;

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}