/**
 * Generated by @bubbacore/elvis from tokens/semantic.tokens.json. Do not edit.
 */

:root {
  --bubba-color-surface-paper: #ffffff; /** Fundo das telas, dos slides e das páginas. */
  --bubba-color-surface-support: #f3f5fb; /** Superfície dos controles e da caixa do preço. */
  --bubba-color-surface-past: #eef0f5; /** Fundo da sessão que já começou. */
  --bubba-color-surface-brand-blue: #011d97; /** Fundo das capas sem imagem. */
  --bubba-color-text-ink: #0d1330; /** Títulos e texto principal. Todo título usa esta cor, nunca o azul nem o vermelho. */
  --bubba-color-text-ink-muted: #4b5272; /** Texto secundário e rótulos. */
  --bubba-color-text-brand-blue: #011d97; /** Links e preços. Nunca em títulos. */
  --bubba-color-text-on-brand-blue: #ffffff; /** Texto sobre o azul da marca, nas ações, nas seleções e nas capas sem imagem. */
  --bubba-color-border-control: #7e86a3; /** Borda dos controles. */
  --bubba-color-border-divider: #dde1ec; /** Divisórias e borda da caixa do preço. É decorativa: nada depende dela para ser percebido. */
  --bubba-color-action-brand-blue: #011d97; /** Seleção e ação: fundo do controle selecionado e da ação principal. */
  --bubba-color-focus-feather-red: #c71615; /** Anel de foco, desenhado com focus.width e afastado do controle por focus.offset. */
  --bubba-color-alert-feather-red: #c71615; /** Avisos sobre o papel. Nunca em títulos nem como fundo. */
  --bubba-font-family-title: 'Noto Serif Display'; /** Família dos títulos, só em títulos, nunca abaixo de 20 px, com todo título em caixa normal, nunca em caixa alta. */
  --bubba-font-family-text: 'Hanken Grotesk'; /** Família de todo o resto: leitura, controles, horários e preços, com algarismos de largura igual por padrão. */
  --bubba-font-weight-title: 600; /** Peso dos títulos. */
  --bubba-font-weight-text-regular: 400; /** Peso da leitura. */
  --bubba-font-weight-text-medium: 500; /** Peso dos destaques leves. */
  --bubba-font-weight-text-bold: 700; /** Peso dos destaques fortes, dos horários e dos preços. */
  --bubba-font-width-title: 62.5%; /** Largura dos títulos na Noto Serif Display, em porcentagem do eixo wdth, como no font-stretch do CSS. */
  --bubba-font-size-title-xs: 20px; /** Menor título, como o nome do filme numa lista de sessões. É o mínimo da Noto Serif Display. */
  --bubba-font-size-title-sm: 24px; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-font-size-title-md: 32px; /** Título da página no celular. */
  --bubba-font-size-title-lg: 40px; /** Título da página em telas largas. */
  --bubba-font-size-title-xl: 48px; /** Maior título, para destaques e capas em telas largas. */
  --bubba-font-size-text-sm: 14px; /** Rótulos e informações de apoio. Menor tamanho de texto. */
  --bubba-font-size-text-md: 16px; /** Leitura, controles, horários e preços. */
  --bubba-font-size-text-lg: 18px; /** Texto de abertura e destaques de leitura. */
  --bubba-space-1: 4px; /** Espaço mínimo, entre um ícone e seu rótulo. */
  --bubba-space-2: 8px; /** Espaço entre itens do mesmo grupo, como os horários de um filme. */
  --bubba-space-3: 12px; /** Espaço interno dos controles compactos e entre linhas de informação. */
  --bubba-space-4: 16px; /** Margem lateral no celular e espaço interno das caixas. */
  --bubba-space-5: 20px; /** Espaço entre um título e o conteúdo que ele abre. */
  --bubba-space-6: 24px; /** Espaço entre blocos, como os filmes de um cinema. */
  --bubba-space-8: 32px; /** Espaço entre seções, como os cinemas de um dia. */
  --bubba-space-10: 40px; /** Margem lateral em telas largas. */
  --bubba-space-12: 48px; /** Espaço entre grandes áreas da página. */
  --bubba-space-16: 64px; /** Maior espaço, no topo e no rodapé da página. */
  --bubba-radius-control: 6px; /** Canto dos controles e das caixas, como a caixa do preço. */
  --bubba-radius-app-icon: 12px; /** Canto do ícone de app. */
  --bubba-border-width: 1px; /** Espessura das bordas dos controles, das divisórias e da caixa do preço. */
  --bubba-focus-width: 2px; /** Espessura do anel de foco, na cor color.focus.feather-red. */
  --bubba-focus-offset: 2px; /** Afastamento entre o anel de foco e o controle, para que o anel fique sobre a superfície em volta, mesmo num controle azul. */
  --bubba-target-min-size: 44px; /** Lado mínimo da área de toque de todo controle. */
  --bubba-typography-title-xs-font-family: 'Noto Serif Display'; /** Menor título, como o nome do filme numa lista de sessões. */
  --bubba-typography-title-xs-font-size: 20px; /** Menor título, como o nome do filme numa lista de sessões. */
  --bubba-typography-title-xs-font-weight: 600; /** Menor título, como o nome do filme numa lista de sessões. */
  --bubba-typography-title-xs-letter-spacing: 0px; /** Menor título, como o nome do filme numa lista de sessões. */
  --bubba-typography-title-xs-line-height: 1.2; /** Menor título, como o nome do filme numa lista de sessões. */
  --bubba-typography-title-xs-font-width: 62.5%; /** Menor título, como o nome do filme numa lista de sessões. */
  --bubba-typography-title-sm-font-family: 'Noto Serif Display'; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-typography-title-sm-font-size: 24px; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-typography-title-sm-font-weight: 600; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-typography-title-sm-letter-spacing: 0px; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-typography-title-sm-line-height: 1.2; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-typography-title-sm-font-width: 62.5%; /** Título de seção, como o nome do cinema ou do dia. */
  --bubba-typography-title-md-font-family: 'Noto Serif Display'; /** Título da página no celular. */
  --bubba-typography-title-md-font-size: 32px; /** Título da página no celular. */
  --bubba-typography-title-md-font-weight: 600; /** Título da página no celular. */
  --bubba-typography-title-md-letter-spacing: 0px; /** Título da página no celular. */
  --bubba-typography-title-md-line-height: 1.1; /** Título da página no celular. */
  --bubba-typography-title-md-font-width: 62.5%; /** Título da página no celular. */
  --bubba-typography-title-lg-font-family: 'Noto Serif Display'; /** Título da página em telas largas. */
  --bubba-typography-title-lg-font-size: 40px; /** Título da página em telas largas. */
  --bubba-typography-title-lg-font-weight: 600; /** Título da página em telas largas. */
  --bubba-typography-title-lg-letter-spacing: 0px; /** Título da página em telas largas. */
  --bubba-typography-title-lg-line-height: 1.1; /** Título da página em telas largas. */
  --bubba-typography-title-lg-font-width: 62.5%; /** Título da página em telas largas. */
  --bubba-typography-title-xl-font-family: 'Noto Serif Display'; /** Maior título, para destaques e capas em telas largas. */
  --bubba-typography-title-xl-font-size: 48px; /** Maior título, para destaques e capas em telas largas. */
  --bubba-typography-title-xl-font-weight: 600; /** Maior título, para destaques e capas em telas largas. */
  --bubba-typography-title-xl-letter-spacing: 0px; /** Maior título, para destaques e capas em telas largas. */
  --bubba-typography-title-xl-line-height: 1.1; /** Maior título, para destaques e capas em telas largas. */
  --bubba-typography-title-xl-font-width: 62.5%; /** Maior título, para destaques e capas em telas largas. */
  --bubba-typography-text-sm-font-family: 'Hanken Grotesk'; /** Rótulos e informações de apoio, quase sempre numa linha só. */
  --bubba-typography-text-sm-font-size: 14px; /** Rótulos e informações de apoio, quase sempre numa linha só. */
  --bubba-typography-text-sm-font-weight: 400; /** Rótulos e informações de apoio, quase sempre numa linha só. */
  --bubba-typography-text-sm-letter-spacing: 0px; /** Rótulos e informações de apoio, quase sempre numa linha só. */
  --bubba-typography-text-sm-line-height: 1.4; /** Rótulos e informações de apoio, quase sempre numa linha só. */
  --bubba-typography-text-md-font-family: 'Hanken Grotesk'; /** Leitura e controles. É a altura de linha do texto corrido. */
  --bubba-typography-text-md-font-size: 16px; /** Leitura e controles. É a altura de linha do texto corrido. */
  --bubba-typography-text-md-font-weight: 400; /** Leitura e controles. É a altura de linha do texto corrido. */
  --bubba-typography-text-md-letter-spacing: 0px; /** Leitura e controles. É a altura de linha do texto corrido. */
  --bubba-typography-text-md-line-height: 1.5; /** Leitura e controles. É a altura de linha do texto corrido. */
  --bubba-typography-text-lg-font-family: 'Hanken Grotesk'; /** Texto de abertura e destaques de leitura, como a sinopse. */
  --bubba-typography-text-lg-font-size: 18px; /** Texto de abertura e destaques de leitura, como a sinopse. */
  --bubba-typography-text-lg-font-weight: 400; /** Texto de abertura e destaques de leitura, como a sinopse. */
  --bubba-typography-text-lg-letter-spacing: 0px; /** Texto de abertura e destaques de leitura, como a sinopse. */
  --bubba-typography-text-lg-line-height: 1.5; /** Texto de abertura e destaques de leitura, como a sinopse. */
  --bubba-typography-figures-font-family: 'Hanken Grotesk'; /** Horários e preços, em negrito e com algarismos de largura igual, numa linha só, dentro dos controles e da caixa do preço. */
  --bubba-typography-figures-font-size: 16px; /** Horários e preços, em negrito e com algarismos de largura igual, numa linha só, dentro dos controles e da caixa do preço. */
  --bubba-typography-figures-font-weight: 700; /** Horários e preços, em negrito e com algarismos de largura igual, numa linha só, dentro dos controles e da caixa do preço. */
  --bubba-typography-figures-letter-spacing: 0px; /** Horários e preços, em negrito e com algarismos de largura igual, numa linha só, dentro dos controles e da caixa do preço. */
  --bubba-typography-figures-line-height: 1.2; /** Horários e preços, em negrito e com algarismos de largura igual, numa linha só, dentro dos controles e da caixa do preço. */
}