/* ══════════════════════════════════════════════════════════════════════════
   Clube Ténis de Coimbra · o site vestido nas páginas da plataforma

   O formulário de inscrição (/inscricao) e o aluguer de campos (/reservas)
   são da plataforma, mas vivem dentro deste site e têm de parecer dele. A
   plataforma carrega este ficheiro por cima do CSS dela (`website.tema` no
   product.yaml) — por isso aqui só se mudam os tokens dela, nunca a forma
   dos componentes:

     papel e tinta     os do site (`--paper`, `--ink`)
     tipografia        Bricolage Grotesque nos títulos, Instrument Sans no
                       texto — as do site, auto-alojadas: o formulário pede
                       dados de famílias e não manda o IP de ninguém a um
                       terceiro só para desenhar letras
     cantos            quase rectos nos controlos (o sistema é de linhas),
                       redondos nos cartões, como as `.surface` do site
     cabeçalho         o papel translúcido e o sublinhado lima do site

   O lima dos botões não está aqui: é a `website.cor` do product.yaml, e a
   plataforma deriva dela o hover, a lavagem e o texto que se lê por cima.

   `:root:root` e não `:root`: em dev o CSS da plataforma entra depois deste,
   e com a mesma especificidade ganhava.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/fontes/bricolage-grotesque-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fontes/instrument-sans-latin.woff2") format("woff2");
}

:root:root{
  /* o site */
  --site-paper:   #F4F3EE;
  --site-ink:     #16180F;
  --site-lima:    #B0E000;
  --site-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  /* os tokens da plataforma, com as cores do site */
  --bg:             var(--site-paper);
  --surface:        #FFFFFF;
  --surface-sunken: #ECEAE2;
  --surface-hover:  #F0EEE6;
  --line:           #DEDCD3;
  --line-soft:      #EAE8E0;
  --line-strong:    #BDBAAE;
  --ink:            var(--site-ink);
  --ink-2:          #3D4033;
  --ink-3:          #63665A;
  --ink-4:          #888A7E;
  /* foco a tinta: um anel lima sobre branco não se vê */
  --focus:          var(--site-ink);

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --radius-xs:  2px;
  --radius-sm:  2px;
  --radius-md:  2px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 18px;
  --radius-3xl: 18px;

  /* As faixas (a barra do total, o fecho da inscrição) não são pretas aqui:
     são cartões brancos que flutuam, como as `.surface` do site, com o
     botão lima a fazer de única cor. */
  --faixa-bg:    #FFFFFF;
  --faixa-line:  rgba(22,24,15,.12);
  --faixa-ink:   var(--site-ink);
  --faixa-meta:  #63665A;
  --faixa-marca: #5B7A00;

  /* a sombra é da cor da tinta, como no site */
  --shadow-1: 0 1px 2px rgba(22,24,15,.10), 0 1px 1px rgba(22,24,15,.06);
  --shadow-2: 0 1px 2px rgba(22,24,15,.16), 0 10px 24px -12px rgba(22,24,15,.42);
  --shadow-3: 0 2px 4px rgba(22,24,15,.20), 0 26px 46px -18px rgba(22,24,15,.55);
}

/* ── tipografia: os títulos são os do site ───────────────────────────────── */

h1, h2,
.display-xxl, .display-xl, .display-lg, .display-md{
  font-family: var(--site-display);
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1, .display-xxl, .display-xl, .display-lg{
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  line-height: 1.04;
}

/* ── o cabeçalho do site ─────────────────────────────────────────────────── */

.pagina-publica__cabecalho[data-site]{
  background: color-mix(in srgb, var(--site-paper) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: rgba(22,24,15,.16);
}
.pagina-publica__cabecalho[data-site] > div{ height: 4.25rem; }

.pagina-publica__nav a{
  position: relative;
  padding-block: .35rem;
  color: var(--site-ink);
}
.pagina-publica__nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--site-lima);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.pagina-publica__nav a:hover::after,
.pagina-publica__nav a[aria-current="page"]::after{ transform: scaleX(1); }

/* ── o fundo é o papel do site ───────────────────────────────────────────── */

body, #root > div{ background: var(--site-paper); }