/* ==========================================================================
   tokens/layout
   --banner-ratio-*: [verificado] proporções dos banners da referência,
   lidas nos nomes dos arquivos publicados (1366x500 desktop / 300x439 mobile).
   Demais valores: [estimado].
   ========================================================================== */
:root {
  --container-max: 1200px;
  --container-wide: 1366px;     /* largura dos banners da referência */
  --container-narrow: 760px;

  --header-height: 76px;
  --header-height-mobile: 64px;

  --banner-ratio-desktop: 1366 / 500;
  --banner-ratio-mobile: 300 / 439;
  --ratio-square: 1 / 1;
  --ratio-story: 9 / 16;

  --grid-cols: 12;
  --z-header: 50;
  --z-drawer: 60;

  /* Breakpoints (documentação; media queries não aceitam var()):
     mobile  < 768px
     tablet  768px – 1023px
     desktop ≥ 1024px  (referência validada em 1440px) */
}