/* ============================================================
   tokens.css — Vesta Ops Design System
   Fonte única de verdade. Importar em todos os demais CSS.
   ============================================================ */

:root {

  /* ── Paleta principal: terracota ───────────────────────── */
  --color-primary:        #C1654A;  /* terracota principal    */
  --color-primary-hover:  #A8513A;  /* hover / estado escuro  */
  --color-primary-soft:   #E8C4B8;  /* fundo sutil / ativo    */
  --color-primary-muted:  rgba(193, 101, 74, 0.09); /* estado ativo nav */

  /* ── Neutros acolhedores ───────────────────────────────── */
  --color-bg:             #FAF6F2;  /* fundo geral, off-white quente */
  --color-surface:        #FFFFFF;  /* cartões, superfícies elevadas */
  --color-border:         #E4D8CF;  /* bordas suaves                 */

  /* ── Texto ─────────────────────────────────────────────── */
  --color-text:           #2E2622;  /* corpo (não preto puro)  */
  --color-text-muted:     #6B5E55;  /* secundário / labels     */

  /* ── Semânticos ────────────────────────────────────────── */
  --color-success:        #4A7A52;
  --color-success-soft:   #EDF4EE;
  --color-warning:        #C08A2E;  /* ⚠ dividendo — aviso, não erro */
  --color-warning-soft:   #FDF5E0;
  --color-danger:         #B0463C;
  --color-danger-soft:    #FDECEA;
  --color-info-soft:      #EAF0F4;  /* azul-claro acolhedor (blocos informativos) */
  --color-muted-soft:     #F2EDE8;  /* cinza-claro quente (blocos neutros)        */

  /* ── Tipografia ────────────────────────────────────────── */
  --font-title: Georgia, 'Times New Roman', serif;  /* h1–h3: serifada */
  --font-body:  'Inter', system-ui, sans-serif;     /* corpo: sans     */

  /* ── Escala tipográfica ────────────────────────────────── */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */

  /* ── Espaçamento ───────────────────────────────────────── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* ── Geometria ─────────────────────────────────────────── */
  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg:  12px;
  --radius-full: 999px;

  /* ── Sombras ───────────────────────────────────────────── */
  --shadow:    0 1px 4px rgba(46,38,34,0.07), 0 0 0 1px rgba(46,38,34,0.04);
  --shadow-md: 0 4px 16px rgba(46,38,34,0.10), 0 0 0 1px rgba(46,38,34,0.05);
  --shadow-lg: 0 8px 30px rgba(46,38,34,0.13);

  /* ── Transições ────────────────────────────────────────── */
  --transition:    0.15s ease;
  --transition-md: 0.2s ease;
}