/* ===== variables.css — Identidade Visual Paideia =====
   Paleta: terracota (brand) + cinza neutro — mesma paleta do app principal
   (apps/web/tailwind.config.ts). --primary-rgb/--border-rgb existem porque
   vários arquivos usam rgba(...) direto (sombra, foco) em vez de var(--primary)/
   var(--border); sem o triplete RGB não dá pra tingir essas sombras via variável.
*/
:root {
  --bg: #F9FAFB;                /* gray-50 — fundo do app (igual ao dashboard-shell) */
  --surface: #FFFFFF;           /* cards e painéis */
  --surface-2: #FDF1ED;         /* brand-50 — hovers e detalhes */
  --primary: #C2542F;           /* brand-500 — cor oficial do Paideia */
  --primary-soft: #DB6F49;      /* brand-400 — hover, estados mais claros */
  --primary-deep: #87371A;      /* brand-700 — pressed, texto sobre --surface-2 */
  --primary-rgb: 194, 84, 47;
  --primary-soft-rgb: 219, 111, 73;
  --ink: #111827;               /* gray-900 — texto e elementos fortes */
  --ink-soft: #374151;
  --accent: #F5C0AC;            /* brand-200 — destaques */
  --accent-soft: #FBE0D6;       /* brand-100 */
  --text: #111827;
  --text-soft: #6B7280;
  --border: #E5E7EB;            /* gray-200 */
  --border-rgb: 229, 231, 235;
  --success: #16A34A;
  --warning: #D97706;
  --warning-rgb: 217, 119, 6;
  --danger: #DC2626;
  --danger-rgb: 220, 38, 38;
  --whatsapp: #25d366;
  --shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 14px 32px rgba(17, 24, 39, 0.12);
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}