/* MesaCerta — Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Cores de fundo e superfície */
  --bg:         #F7F7F5;
  --white:      #FFFFFF;

  /* Texto */
  --ink:        #111110;
  --ink2:       #3D3C3A;
  --muted:      #6B6A67;
  --ghost:      #A8A7A3;

  /* Bordas */
  --border:     #E5E4E0;

  /* Terracota — cor de ação principal */
  --primary:    #B5451B;
  --primary2:   #8E3214;
  --primary3:   #C0572A;
  --primarybg:  #FBF0EB;
  --primarybdr: #E8B5A0;

  /* Semânticas (status — não usar como cor de ação) */
  --green:      #16A34A;
  --greenbg:    #DCFCE7;
  --greenbdr:   #86EFAC;
  --red:        #DC2626;
  --redbg:      #FEF2F2;
  --redbdr:     #FCA5A5;
  --amber:      #D97706;
  --amberbg:    #FFFBEB;
  --amberbdr:   #FCD34D;

  /* Tipografia */
  --font-d: 'Sora', -apple-system, sans-serif;    /* títulos, labels, botões, logo */
  --font-b: 'DM Sans', -apple-system, sans-serif; /* corpo, parágrafos, tabelas, inputs */

  /* Espaçamento / Raios */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
}

/* Aplicação global de fontes */
body         { font-family: var(--font-b); }
h1,h2,h3,h4  { font-family: var(--font-d); }
button, .btn { font-family: var(--font-d); }
label        { font-family: var(--font-d); }
.nav-logo    { font-family: var(--font-d); font-weight: 800; }
.badge,
[class*="badge-"] { font-family: var(--font-d); }