:root {
    /* Cores base — identidade monocromática SOPEA */
    --color-black: #0a0a0a;
    --color-white: #ffffff;
    --color-border: #0a0a0a;
    --color-border-light: #d9d9d9;
    --color-text: #0a0a0a;
    --color-text-inverse: #ffffff;
    --color-muted: #4a4a4a;
    --color-surface: #ffffff;
    --color-surface-inverse: #0a0a0a;
    --color-gray: rgb(43, 43, 43);
  
    /* Tipografia */
    --font-base: 'Inter', 'Segoe UI', Arial, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 800;
    --ls-tag: 0.08em;
  
    /* Espaçamento */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
  
    /* Layout */
    --sidebar-width: 280px;
    --border-w: 2px;
    --content-max: 1440px;
  
    /* Transições */
    --transition-fast: 150ms ease;

    /* Compatibilidade — nomes antigos usados no site público (index/hero/footer/login) */
    --preto: var(--color-black);
    --branco: var(--color-white);
    --cinza: #f2f2f2;
    --cinza-escuro: var(--color-muted);
    --cinza-medio: #cfcfcf;
    /* Cabeçalho — os mesmos números valem para a barra do
       index.html e para a do sistema (home.html), para a logo
       não mudar de lugar quando a pessoa entra. */
    --header-altura: 88px;
    --header-recuo: 6%;

    /* Identidade quadrada: nada de canto arredondado em lugar
       nenhum. Os nomes continuam existindo para não quebrar as
       dezenas de regras que já os usam — basta mudar aqui se um
       dia quiserem os cantos de volta. */
    --raio: 0;
    --raio-sm: 0;
    --transicao: all 0.3s ease;
    --altura-header: 70px;
  }