/* ==========================================================================
   Tokens de design — cores, tipografia, medidas
   Cores extraídas do guia oficial (cores.png).
   ========================================================================== */
:root {
  /* --- Paleta oficial --- */
  --cream:        #F0E6D7;  /* fundo claro principal (RGB 240,230,215) */
  --cream-2:      #FBF3E4;  /* creme mais claro (cards de gráfico)     */
  --cream-logo:   #EFE5D5;  /* creme dos logos                         */
  --brown:        #402C23;  /* marrom escuro (RGB 64,44,35)            */
  --brown-dark:   #2A2221;  /* marrom quase preto (selos da timeline)  */
  --amber:        #EE9A2F;  /* âmbar/laranja de fundo (RGB 238,154,47) */
  --orange:       #EF7830;  /* laranja de destaque (RGB 239,120,48)    */
  --orange-2:     #E07A27;  /* laranja escuro (barras de gráfico)      */
  --orange-3:     #F0B877;  /* laranja claro (barras de gráfico)       */
  --red:          #DC4A4D;  /* vermelho da bandeira (RGB 220,74,77)    */
  --red-btn:      #ED3E41;  /* vermelho de botões/etapa ativa          */
  --blue:         #273182;  /* azul da bandeira (RGB 39,49,130)        */
  --black:        #000000;

  /* --- Papéis semânticos --- */
  --ink:            var(--brown);   /* texto sobre fundos claros  */
  --ink-invert:     var(--cream);   /* texto sobre fundos escuros */

  /* --- Tipografia --- */
  --font: "Inconsolata", ui-monospace, "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;

  /* Escala tipográfica (px de projeto @1440 → rem, base 16px) */
  --fs-hero:    3.25rem;   /* 52px  — título do herói           */
  --fs-display: 3.3rem;    /* 53px  — títulos de seção (padrão) */
  --fs-lg:      1.55rem;   /* 25px  — leads / intros            */
  --fs-md:      1.4rem;    /* 22px  — corpo padrão              */
  --fs-sm:      1.25rem;   /* 20px  — notas                     */
  --fs-nav:     1.16rem;   /* 18.6px — menu */

  --lh-tight: 1.06;
  --lh-body:  1.5;

  /* --- Medidas de layout --- */
  --maxw:       90rem;     /* 1440px — largura do frame de projeto */
  --gutter:     7rem;      /* 112px — recuo lateral do conteúdo    */
  --slide-h:    50.625rem; /* 810px — altura do slide (16:9)       */
  --masthead-h: 5rem;      /* 80px — altura do cabeçalho (herói)   */
  --radius-pill: 999px;
}