/* Tema do loop. Pasta do Gabriel: muda os valores, não os nomes.
   Tudo o que é aspecto vive aqui; o motor está em app.js e index.html.

   Isto é o site da Swingo trazido para o ecrã do carro. As cores são as mesmas do
   swingo.pt (Swingo Website/styles.css):

     brick   #bf6826   preços e chamadas à acção
     dark    #1b3d48   texto
     mustard #dab162   realces sobre fotografia
     sage    #a1af81   o símbolo do logótipo
     creme   #f5f2e9   fundo das secções

   O site é claro: superfícies em creme, texto em dark teal, preço em brick. As faixas
   de cima e de baixo são creme quase opaco, que é o mesmo que um cartão de tour no
   site tem por trás do texto. A fotografia fica a ocupar a faixa do meio, como nos
   heróis do site.

   Três notas de quem vai mexer nisto a seguir:

   1. O LOGÓTIPO tem de ser a versão escura (media/swingo-dark.svg). Sobre creme, o
      logótipo branco desaparece. Está trocado no manifesto.

   2. A FONTE é Roboto e não Authentic Sans. A fonte da marca teria de ir dentro do
      APK, que é pasta do Manuel; a Roboto existe em qualquer Android e é da mesma
      família de grotescas. Quando o ficheiro estiver no APK, muda-se só aqui.

   3. O CARTÃO DE DICA é o único sítio onde o tema não chega por variáveis. O motor
      desenha-o com um gradiente escuro por cima da fotografia e o texto herda a cor
      do corpo, que agora é escura: ficava ilegível. As duas regras no fim do ficheiro
      corrigem isso. É a única coisa aqui que não é uma variável, e se o motor mudar
      a estrutura do #tip convém voltar a olhar. */
:root {
  --bg: #f5f2e9;                          /* creme, o fundo das secções do site */
  --banner: rgba(245, 242, 233, 0.94);    /* faixas de cima e de baixo */
  --text: #1b3d48;                        /* dark teal */
  --text-muted: rgba(27, 61, 72, 0.68);
  --accent: #bf6826;                      /* brick: preço e realces */
  --button-bg: rgba(255, 255, 255, 0.88);
  --button-border: rgba(27, 61, 72, 0.22);
  --qr-bg: #FFFFFF;
  --mustard: #dab162;          /* etiquetas sobre fotografia */
  --sage-forte: #5f7139;      /* os vistos do "what's included" */
  --gutter: 48px;              /* margem lateral das faixas e dos paineis */

  --font: Roboto, "Helvetica Neue", Arial, sans-serif;
  --title-size: 46px;         /* banner de cima */
  --price-size: 42px;         /* banner de baixo */
  --caption-size: 24px;
  --tip-size: 36px;
  --button-size: 24px;

  --banner-top-height: 120px;     /* zona segura de cima, não mexer sem refazer a media */
  --banner-bottom-height: 168px;  /* zona propria do rodape; o cartao do QR sobressai por cima */
  --radius: 8px;
  --qr-size: 200px;          /* o cartao sobe acima da faixa; ver #qr-block */
  --card-fade-ms: 400;
}

/* Ver a nota 3 acima: o cartão de dica vive sobre fotografia escurecida, por isso
   o texto tem de continuar claro mesmo com o resto do tema em dark teal sobre creme.
   A etiqueta leva mustard e não brick: sobre escuro, o brick tem pouco contraste.
   O selector é `span.k` de propósito — o <style> do index.html vem depois deste
   ficheiro, e com a mesma especificidade ganhava ele. */
#tip p { color: var(--dica-texto, #ffffff); }
#tip span.k { color: var(--kicker, var(--mustard)); text-shadow: 0 1px 10px rgba(0,0,0,0.75); }

/* O palco fica em dark teal, não em creme, e não é capricho. Na troca de cartões as
   duas fotografias sobrepõem-se em transparência e o fundo atravessa-as: sobre creme
   dava um clarão leitoso de meio segundo a cada 10 segundos. Sobre o teal a passagem
   lê-se como uma dissolução normal. O creme continua a ser o fundo dos painéis. */
body #stage { background: var(--fundo-ecra, #1b3d48); }

/* ATENÇÃO a quem mexer aqui: as três regras deste ficheiro levam `body` à frente ou
   são `#tip ...`, e por isso GANHAM ao tema do cliente, que entra num <style> no fim
   do <head> com `:root`. Uma regra com um valor fixo aqui é um valor que nenhum
   cliente consegue mudar — por isso lêem todas uma variável. A regra geral do leitor:
   se um cliente precisa de escrever uma regra CSS, é porque falta aqui uma variável. */