/* Caderno da Obra — tokens de marca v1.0, 20/10/2026.
   Use estes tokens no CSS/Tailwind. Nunca use a terracota da marca
   para texto pequeno em fundo claro: contraste insuficiente. */
:root {
  --cdo-brand-navy: #183C48;
  --cdo-brand-orange: #E17A45;
  --cdo-brand-cream: #F7F4EE;
  --cdo-brand-slate: #8A9AA5;
  --cdo-text: #193B46;
  --cdo-text-muted: #526872;
  --cdo-orange-text: #9C421C;
  --cdo-canvas: #FBFAF7;
  --cdo-surface: #FFFFFF;
  --cdo-border: #DCE4E5;
  --cdo-success: #176B4B;
  --cdo-danger: #A43135;
  --cdo-brand-hover: #0F2C36;
  --cdo-tint: #EEF3F4;
  --cdo-warm-tint: #FBEFE7;
  --cdo-warm-border: #EACAB8;
  --cdo-success-tint: #EAF4EF;
  --cdo-danger-tint: #FCF0F0;
  --cdo-danger-border: #EAC4C6;
  --cdo-on-dark: #E3EAED;
  --cdo-dark-border: #557782;
  --cdo-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cdo-radius-sm: 10px;
  --cdo-radius-md: 16px;
  --cdo-radius-lg: 22px;
  --cdo-space-1: 4px;
  --cdo-space-2: 8px;
  --cdo-space-3: 12px;
  --cdo-space-4: 16px;
  --cdo-space-6: 24px;
  --cdo-space-8: 32px;
  --cdo-button-min-height: 56px;
  --cdo-focus-ring: 3px solid var(--cdo-orange-text);
}
/* Exemplos isolados por classe: adapte ao design system já existente. */
.cdo-root { font-family: var(--cdo-font-family); color: var(--cdo-text); background: var(--cdo-canvas); font-size: 18px; line-height: 1.5; }
.cdo-button-primary { min-height: var(--cdo-button-min-height); border: 0; border-radius: var(--cdo-radius-md); padding: 14px 20px; font-size: 18px; font-weight: 700; color: white; background: var(--cdo-brand-navy); cursor: pointer; }
.cdo-button-primary:hover { background: var(--cdo-brand-hover); }
.cdo-button-primary:focus-visible, .cdo-control:focus-visible { outline: var(--cdo-focus-ring); outline-offset: 3px; }
.cdo-card { background: white; border: 1px solid var(--cdo-border); border-radius: var(--cdo-radius-lg); padding: 20px; }
.cdo-muted { color: var(--cdo-text-muted); }
.cdo-accent { color: var(--cdo-orange-text); } /* Laranja de marca #E17A45 é decorativo, não texto pequeno. */
@media (prefers-reduced-motion: reduce) { .cdo-root *, .cdo-root *::before, .cdo-root *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }