/* Black Line Cars — tokens de design (v2: mais escuro, ouro do logótipo, cantos suaves)
   Base fria quase preta (matiz ≈ 210°); ouro amostrado do logótipo (assets/marca/logo-palette.json).
   Tabela de contraste e distância à EVZONE: tools/palette_check.py → design-sheet.html. */

:root {
  /* superfícies */
  --preto:        #000000;   /* rodapé e scrims de fotografia */
  --obsidiana:    #06080B;   /* fundo da página */
  --obsidiana-2:  #0B0E12;   /* superfícies elevadas, navegação fixa */
  --grafite:      #11161B;   /* cartões, inputs, painéis */
  --grafite-hi:   #1A2128;   /* esqueleto, realce subtil */
  --grafite-press:#0D1115;   /* estado premido dos cartões */
  --linha:        #1F262E;   /* fios divisórios */

  /* texto e UI */
  --aco:          #66707C;   /* bordas de inputs, ícones, desativado (≥ 3:1) */
  --nevoa:        #A6AEB8;   /* texto secundário */
  --marfim:       #EEF1F4;   /* texto principal — frio */

  /* o ouro do logótipo */
  --ouro:         #D6B27A;   /* a linha, botão primário, preço mensal, destaques */
  --ouro-claro:   #ECCF9C;   /* hover, anel de foco, palavra em destaque dos títulos */
  --ouro-escuro:  #8F6B3E;   /* só fios decorativos — nunca sob texto */
  --ouro-press:   #C39A5F;   /* estado ativo do botão primário */

  --erro:         #EE9A86;   /* erros de formulário — sempre com ícone + texto */

  /* canais RGB (para transparências sem repetir valores) */
  --preto-rgb: 0 0 0;
  --obsidiana-rgb: 6 8 11;
  --grafite-rgb: 17 22 27;
  --ouro-rgb: 214 178 122;
  --marfim-rgb: 238 241 244;

  /* tipografia */
  --f-display: "Michroma", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-label:   "Michroma", "Manrope", system-ui, sans-serif;

  /* espaçamento — base 8 px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;

  /* grelha */
  --margin: 80px;
  --gutter: 24px;
  --max: 1280px;
  --header-h: 76px;

  /* forma — geometria suave */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-ctl: 14px;     /* botões, inputs, selects */
  --r-card: 20px;    /* cartões, fotografias */
  --r-lg: 28px;      /* mosaicos, painéis grandes */
  --r-xl: 36px;      /* secções inseridas, rodapé */
  --r-pill: 999px;   /* só etiquetas, estado e interruptor */

  /* movimento */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-line: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-mid: 350ms;
  --t-slow: 600ms;

  color-scheme: dark;
}

@media (max-width: 1400px) { :root { --margin: 48px; } }          /* o cabeçalho completo precisa de espaço entre 1280 e 1400 px */
@media (max-width: 1100px) { :root { --margin: 40px; } }
@media (max-width: 720px)  { :root { --margin: 20px; --gutter: 16px; --header-h: 64px; --r-card: 18px; --r-xl: 28px; } }