/* =============================================================
   Thiago Assessoria Ads — Design Tokens
   Fonte: identidade-visual.md
   Versão: julho de 2026
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     CORES PRINCIPAIS
  ----------------------------------------------------------- */
  --color-grafite:     #282828;
  --color-offwhite:    #EFEFEF;
  --color-oliva:       #515044;

  /* -----------------------------------------------------------
     CORES DE SUPORTE
  ----------------------------------------------------------- */
  --color-oliva-dark:  #5C5840;
  --color-coral:       #D07B6A;
  --color-black:       #111111;
  --color-gray:        #909090;
  --color-amber:       #C98530;
  --color-sage:        #A8B898;

  /* -----------------------------------------------------------
     TOKENS SEMÂNTICOS — FUNDOS E SUPERFÍCIES
  ----------------------------------------------------------- */
  --color-bg:           #EFEFEF;   /* fundo principal (modo claro) */
  --color-bg-dark:      #282828;   /* fundo principal (modo escuro) */
  --color-surface:      #FFFFFF;   /* cards, modais, inputs */
  --color-surface-dark: #111111;   /* superfície em modo escuro */

  /* -----------------------------------------------------------
     TOKENS SEMÂNTICOS — TEXTOS
  ----------------------------------------------------------- */
  --color-text-primary:     #282828;  /* texto principal sobre claro */
  --color-text-primary-inv: #EFEFEF;  /* texto principal sobre escuro */
  --color-text-secondary:   #909090;  /* apoio, legendas, metadados */
  --color-text-disabled:    #909090;  /* estado desativado */

  /* -----------------------------------------------------------
     TOKENS SEMÂNTICOS — DESTAQUE E INTERAÇÃO
  ----------------------------------------------------------- */
  --color-accent:      #515044;   /* cor de assinatura da marca */
  --color-accent-dark: #5C5840;   /* hover / estado ativo do accent */
  --color-cta:         #C98530;   /* chamadas para ação, botões primários */

  /* -----------------------------------------------------------
     TOKENS SEMÂNTICOS — ESTADOS
  ----------------------------------------------------------- */
  --color-success: #A8B898;   /* confirmações, operações bem-sucedidas */
  --color-error:   #D07B6A;   /* erros, validações negativas */
  --color-warning: #C98530;   /* avisos, atenção necessária */
  --color-info:    #909090;   /* informações neutras de sistema */

  /* -----------------------------------------------------------
     TOKENS SEMÂNTICOS — BORDAS E DIVISORES
  ----------------------------------------------------------- */
  --color-border:  rgba(144, 144, 144, 0.3);  /* bordas de componentes */
  --color-divider: #EFEFEF;                   /* linhas divisórias */

  /* -----------------------------------------------------------
     TIPOGRAFIA — FONTES
  ----------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Noto Sans', sans-serif;
  --font-body:    'Montserrat', 'Noto Sans', sans-serif;

  /* -----------------------------------------------------------
     TIPOGRAFIA — ESCALA DE TAMANHOS
  ----------------------------------------------------------- */
  --text-display: 4rem;      /* 64px — hero, capas, manchetes */
  --text-h1:      3rem;      /* 48px — título de página */
  --text-h2:      2.25rem;   /* 36px — seções principais */
  --text-h3:      1.75rem;   /* 28px — subseções */
  --text-h4:      1.375rem;  /* 22px — cards, blocos */
  --text-lg:      1.125rem;  /* 18px — body large */
  --text-base:    1rem;      /* 16px — body padrão */
  --text-sm:      0.875rem;  /* 14px — textos de apoio */
  --text-xs:      0.75rem;   /* 12px — captions, mínimos */

  /* -----------------------------------------------------------
     ESPAÇAMENTOS
  ----------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -----------------------------------------------------------
     BORDER RADIUS
  ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

}