/* Fonte única dos valores visuais (identidade "Inox & Brasa" v2). Ver docs/design.md. Somente tema claro na v1. */
:root {
  /* Inox (neutros frios) */
  --inox-50: #F4F6F8;  --inox-100: #E9EDF1; --inox-200: #D5DBE2;
  --inox-400: #9AA5B1; --inox-600: #5B6672; --inox-800: #2A323B;
  --grafite: #161B21;  --grafite-2: #1F262E; --grafite-borda: #36404A;

  /* Marca */
  --brasa: #C2410C; --brasa-hover: #9A3412; --brasa-soft: #FDEEE6;  /* ação principal */
  --gelo: #0E7490;  --gelo-soft: #E3F3F7;                            /* informação e foco */

  /* Semânticas */
  --ok: #15803D;    --ok-soft: #E4F4E9;
  --erro: #B91C1C;  --erro-soft: #FBE8E8;
  --expirado: #6B5B3E; --expirado-soft: #F1EDE6; --expirado-faixa: #A8977A;

  /* Aliases de uso */
  --color-bg: var(--inox-50);
  --color-surface: #FFFFFF;
  --color-border: var(--inox-200);
  --color-border-strong: var(--inox-400);
  --color-text: var(--grafite);
  --color-text-secondary: var(--inox-600);

  /* Tipografia */
  --font-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-corpo: "Barlow", system-ui, "Segoe UI", sans-serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem;

  /* Espaço, forma, sombra, movimento */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px;
  --sombra-1: 0 1px 2px rgba(22,27,33,.06), 0 4px 14px rgba(22,27,33,.06);
  --sombra-2: 0 2px 4px rgba(22,27,33,.08), 0 16px 40px rgba(22,27,33,.14);
  --sombra-brasa: 0 6px 16px rgba(194,65,12,.28);
  --duration-fast: 150ms; --duration-normal: 200ms; --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Layout (breakpoint único de layout: 900px) */
  --touch-min: 44px; --campo-h: 56px; --campo-h-grande: 64px; --btn-h-celular: 54px;
  --sidebar-width: 240px; --painel-largura: 480px; --content-max-width: 1200px;
}