@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/manrope-latin.woff2') format('woff2');
  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: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fontes/jetbrains-mono-latin.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fontes/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root,
[data-tema="escuro"] {
  --veio-marca: url("icones/icone.svg");
  --veio-bg: #121110;
  --veio-surface: #1B1A17;
  --veio-surface-2: #262420;
  --veio-border: #302D27;
  --veio-border-strong: #736B5D;
  --veio-text: #F2EEE6;
  --veio-muted: #A89F90;
  --veio-accent: #F5B83D;
  --veio-accent-ink: #1A1204;
  --veio-accent-text: #F5B83D;
  --veio-danger-ink: #1A1204;
  --veio-kw-bg: rgba(245, 184, 61, .40);
  --veio-kw-fg: #F2EEE6;
  --veio-success: #6FCF8E;
  --veio-danger: #FF7A66;
  --veio-info: #86BDF2;

  /* Fundos suaves de estado: o próprio token entre 8% e 18% de opacidade. */
  --veio-accent-soft: rgba(245, 184, 61, .14);
  --veio-success-soft: rgba(111, 207, 142, .14);
  --veio-danger-soft: rgba(255, 122, 102, .14);
  --veio-info-soft: rgba(134, 189, 242, .14);

  /* Fundo do modal e sombra das camadas que flutuam (modal, toast, aviso). */
  --veio-scrim: rgba(0, 0, 0, .55);
  --veio-sombra: 0 18px 40px -12px rgba(0, 0, 0, .6);
  /* A sombra suave das ilhas do Painel (sidebar e conteúdo), que não flutuam. */
  --veio-sombra-ilha: 0 10px 30px rgba(0, 0, 0, .35);
  /* O brilho ouro da linha que o overlay desenha sob o texto capturado (sempre no tema escuro). */
  --veio-brilho-da-linha: 0 0 12px rgba(245, 184, 61, .55);

  /* O fio de luz no topo do botão primário, que dá o relevo do protótipo. */
  --veio-brilho: rgba(255, 255, 255, .35);

  /* O avatar com a inicial do nome (chip de conta e card Conta & sync): o
     degradê bronze e a letra clara do shell travado. São os mesmos nos dois
     temas, então o claro não os redefine. */
  --veio-avatar-fundo: linear-gradient(135deg, #8A6A2A, #3A2F1C);
  --veio-avatar-tinta: #F2EEE6;

  --veio-fonte-ui: 'Manrope', system-ui, sans-serif;
  --veio-fonte-display: 'Manrope', system-ui, sans-serif;
  --veio-fonte-frase: 'Manrope', system-ui, sans-serif;
  --veio-fonte-mono: 'JetBrains Mono', ui-monospace, monospace;

  --veio-tam-display: 32px;
  --veio-tam-hero: 24px;
  --veio-tam-pagina: 22px;
  --veio-tam-modal: 20px;
  --veio-tam-contador: 20px;
  --veio-tam-card: 15px;
  --veio-tam-frase: 15px;
  --veio-tam-destaque: 16px;
  --veio-tam-corpo: 13.5px;
  /* Resumo e textos de apoio dos cards de Configurações, os botões pequenos
     dentro deles e os controles da linha de filtros de Frases (o 12,5 das
     specs de Configurações e de Frases). */
  --veio-tam-apoio: 12.5px;
  --veio-tam-legenda: 11.5px;
  --veio-tam-tecla: 11px;
  /* A tecla no resumo fechado de Atalhos (Configurações), maior que a do popup. */
  --veio-tam-tecla-resumo: 12px;
  --veio-tam-micro: 10.5px;

  --veio-peso-display: 800;
  --veio-peso-titulo: 700;
  --veio-peso-legenda: 800;
  --veio-peso-num: 600;
  --veio-peso-rotulo: 600;

  --veio-tracking-display: -0.02em;
  --veio-tracking-legenda: 0.14em;
  --veio-altura-frase: 1.5;

  /* O losango que abre o título de seção do popup. */
  --veio-raio-losango: 2px;
  /* A ponta arredondada da linha ouro que o overlay desenha sob o texto capturado. */
  --veio-raio-linha: 2px;
  --veio-raio-checkbox: 6px;
  --veio-raio-tecla: 5px;
  /* A tecla (kbd) como a desenham os protótipos de Frases e de Configurações. */
  --veio-raio-tecla-resumo: 8px;
  --veio-raio-icone: 10px;
  --veio-raio-input: 12px;
  --veio-raio-card: 14px;
  --veio-raio-painel: 20px;
  --veio-raio-selecao: 22px;
  --veio-raio-pilula: 999px;

  --veio-piscar: 1.1s;
  --veio-esqueleto: 1.2s;
  --veio-transicao: 150ms;
  /* A borda ouro que pisca no card aberto por endereço (#configuracoes/<seção>). */
  --veio-destaque: 1.4s;
  /* A volta inteira da animação de dois quadros do passo da Conexão (ONB-19). */
  --veio-ciclo-dos-quadros: 4s;
  /* O movimento da festa do quiz de nível (#171): o pulo da certa, o "+10" que sobe, o confete, e as portas da Revelação (cada uma enche em --veio-mov-porta, uma
     depois da outra, com --veio-mov-entre-portas entre os começos). Só se mexe depois de um toque, e "menos movimento" tira tudo e deixa a cor. */
  --veio-mov-pulo: 380ms;
  --veio-mov-ponto: 800ms;
  --veio-mov-confete: 1000ms;
  --veio-mov-porta: 480ms;
  --veio-mov-entre-portas: 650ms;
  --veio-mov-brilho: 900ms;
  /* A mola passa um pouco do alvo e volta (o pulo e a porta cheia); a saída é rápida e assenta devagar (o que sobe e some). */
  --veio-curva-mola: cubic-bezier(.34, 1.56, .64, 1);
  --veio-curva-saida: cubic-bezier(.16, 1, .3, 1);
}

:root[data-tema="claro"],
[data-tema="claro"] {
  --veio-marca: url("icones/icone-claro.svg");
  --veio-bg: #F7F4EE;
  --veio-surface: #FFFFFF;
  --veio-surface-2: #F0EBE1;
  --veio-border: #E4DCCD;
  --veio-border-strong: #968C79;
  --veio-text: #1C1A16;
  --veio-muted: #625B4F;
  --veio-accent: #F0AE2E;
  --veio-accent-ink: #1A1204;
  --veio-accent-text: #855608;
  --veio-danger-ink: #FFFFFF;
  --veio-kw-bg: rgba(240, 174, 46, .45);
  --veio-kw-fg: #1C1A16;
  --veio-success: #1F7A45;
  --veio-danger: #B42318;
  --veio-info: #1D5FA8;

  --veio-accent-soft: rgba(240, 174, 46, .16);
  --veio-success-soft: rgba(31, 122, 69, .12);
  --veio-danger-soft: rgba(180, 35, 24, .12);
  --veio-info-soft: rgba(29, 95, 168, .12);

  --veio-scrim: rgba(40, 30, 10, .35);
  --veio-sombra: 0 18px 40px -16px rgba(60, 40, 10, .35);
  --veio-sombra-ilha: 0 10px 30px rgba(60, 45, 20, .12);

  --veio-brilho: rgba(255, 255, 255, .55);
}

.veio-marca {
  flex: none;
  border-radius: var(--veio-raio-icone);
  /* No claro, o cristal vai para o azulejo claro (icones/icone-claro.svg); o
     src do <img> continua o escuro, que é o que vale sem este CSS. */
  content: var(--veio-marca);
}

.veio-nome {
  font-family: var(--veio-fonte-display);
  font-weight: 500;
  letter-spacing: var(--veio-tracking-display);
  color: var(--veio-text);
}

.veio-nome b {
  font-weight: 800;
}

.veio-cursor {
  display: inline-block;
  width: .46em;
  height: .92em;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--veio-accent);
  vertical-align: -.1em;
  animation: veio-piscar var(--veio-piscar) steps(1) infinite;
}

@keyframes veio-piscar {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .veio-cursor {
    animation: none;
  }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--veio-accent);
  outline-offset: 2px;
}

/* Transição em 0s, não 1 ms: a propriedade padrão da transição é `all`, e 1 ms faria todo elemento
   transicionar toda mudança (a coluna do shell ao estreitar a janela), com um quadro no valor antigo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}

[data-trocando-tema],
[data-trocando-tema] *,
[data-trocando-tema] *::before,
[data-trocando-tema] *::after {
  transition: none !important;
}