/* Opero: tokens de design. GERADO por scripts/build.py a partir de tokens/tokens.json. Não edite. */
/* Copiado de opero-marca; sincronize com scripts/sync-marca.sh e não edite à mão. */
/* Fonte: use os woff2 locais abaixo ou o Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,wght@75..125,200..900&display=swap" rel="stylesheet"> */

@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fontes/mona-sans-latin.woff2") format("woff2-variations");
  font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fontes/mona-sans-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --op-laranja: #F7824F;
  --op-laranja-80: #F99B72;
  --op-laranja-60: #FAB49A;
  --op-laranja-40: #FCCDB9;
  --op-laranja-20: #FDE6DC;
  --op-cinza: #28292B;
  --op-cinza-80: #535455;
  --op-cinza-60: #7E7F80;
  --op-cinza-40: #A9A9AA;
  --op-cinza-20: #D4D4D5;
  --op-branco: #FFFFFF;
  --op-azul: #7396A3;
  --op-azul-80: #8FABB5;
  --op-azul-60: #ABC0C8;
  --op-azul-40: #C7D5DA;
  --op-azul-20: #E3EAED;
  --op-preto: #000000;

  /* papéis */
  --op-primaria: var(--op-laranja);
  --op-texto: var(--op-cinza);
  --op-fundo: var(--op-branco);
  --op-fundo-escuro: var(--op-cinza);
  --op-apoio: var(--op-azul);

  --op-fonte: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --op-display-tamanho: 56px; --op-display-peso: 600; --op-display-entrelinha: 1.05; --op-display-espacamento: -0.02em;
  --op-titulo-1-tamanho: 40px; --op-titulo-1-peso: 600; --op-titulo-1-entrelinha: 1.1; --op-titulo-1-espacamento: -0.01em;
  --op-titulo-2-tamanho: 28px; --op-titulo-2-peso: 600; --op-titulo-2-entrelinha: 1.2; --op-titulo-2-espacamento: 0em;
  --op-titulo-3-tamanho: 20px; --op-titulo-3-peso: 600; --op-titulo-3-entrelinha: 1.3; --op-titulo-3-espacamento: 0em;
  --op-corpo-tamanho: 16px; --op-corpo-peso: 400; --op-corpo-entrelinha: 1.6; --op-corpo-espacamento: 0em;
  --op-pequeno-tamanho: 14px; --op-pequeno-peso: 400; --op-pequeno-entrelinha: 1.5; --op-pequeno-espacamento: 0em;
  --op-rotulo-tamanho: 12px; --op-rotulo-peso: 600; --op-rotulo-entrelinha: 1.4; --op-rotulo-espacamento: 0.08em;

  --op-raio-sm: 8px;
  --op-raio-md: 16px;
  --op-raio-lg: 24px;
  --op-raio-full: 9999px;
  --op-espaco-1: 4px;
  --op-espaco-2: 8px;
  --op-espaco-3: 12px;
  --op-espaco-4: 16px;
  --op-espaco-6: 24px;
  --op-espaco-8: 32px;
  --op-espaco-12: 48px;
  --op-espaco-16: 64px;
  --op-espaco-24: 96px;
}

/* Estilos de texto prontos */
.op-display { font-family: var(--op-fonte); font-size: var(--op-display-tamanho); font-weight: var(--op-display-peso); line-height: var(--op-display-entrelinha); letter-spacing: var(--op-display-espacamento); }
.op-titulo-1 { font-family: var(--op-fonte); font-size: var(--op-titulo-1-tamanho); font-weight: var(--op-titulo-1-peso); line-height: var(--op-titulo-1-entrelinha); letter-spacing: var(--op-titulo-1-espacamento); }
.op-titulo-2 { font-family: var(--op-fonte); font-size: var(--op-titulo-2-tamanho); font-weight: var(--op-titulo-2-peso); line-height: var(--op-titulo-2-entrelinha); letter-spacing: var(--op-titulo-2-espacamento); }
.op-titulo-3 { font-family: var(--op-fonte); font-size: var(--op-titulo-3-tamanho); font-weight: var(--op-titulo-3-peso); line-height: var(--op-titulo-3-entrelinha); letter-spacing: var(--op-titulo-3-espacamento); }
.op-corpo { font-family: var(--op-fonte); font-size: var(--op-corpo-tamanho); font-weight: var(--op-corpo-peso); line-height: var(--op-corpo-entrelinha); letter-spacing: var(--op-corpo-espacamento); }
.op-pequeno { font-family: var(--op-fonte); font-size: var(--op-pequeno-tamanho); font-weight: var(--op-pequeno-peso); line-height: var(--op-pequeno-entrelinha); letter-spacing: var(--op-pequeno-espacamento); }
.op-rotulo { font-family: var(--op-fonte); font-size: var(--op-rotulo-tamanho); font-weight: var(--op-rotulo-peso); line-height: var(--op-rotulo-entrelinha); letter-spacing: var(--op-rotulo-espacamento); font-stretch: 125%; text-transform: uppercase; }