/* =====================================================================
   MUSICALISA — Design System "Teclas"  ·  tokens
   A identidade nasce do logo: as 5 teclas coloridas do xilofone sobre a
   areia quente do site antigo. Documentação: 10 SITE/DOCS/design-system.md
   ===================================================================== */

@font-face {
  font-family: "Amatic SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/amatic-sc-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/assistant-var-latin-v2.woff2") format("woff2");
}

:root {
  /* ---- as 5 teclas (cores exatas do logo) ---- */
  --tecla-azul:     #7CB8E8;
  --tecla-lima:     #C8D850;
  --tecla-amarela:  #F0E46C;
  --tecla-laranja:  #DC6434;
  --tecla-framboesa:#E03C5C;
  --madeira:        #E8B460;   /* a barra que segura as teclas */
  --parafuso:       #447498;   /* o quadradinho de cada tecla */

  /* ---- superfícies ---- */
  --areia:   #EFE3CB;   /* fundo principal (o bege do site antigo, mais leve) */
  --creme:   #F7F0E3;   /* fundo alternado */
  --papel:   #FFFBF4;   /* cartões */
  --ceu:     #84B2E0;   /* seções azuis */
  --framboesa-fundo: #C23A52; /* seções vermelhas — texto branco 5,2:1 */

  /* ---- cor de marca aplicada ---- */
  --framboesa:        #D7475F; /* títulos grandes sobre areia (3,3:1 — só texto grande) */
  --framboesa-texto:  #B3334A; /* texto pequeno em framboesa sobre areia/papel (4,7:1+) */
  --framboesa-no-ceu: #8A2438; /* títulos sobre o azul (3,9:1) */
  --sol:              #F5CF4D; /* botão principal — tinta sobre sol 8,3:1 */
  --sol-sombra:       #C99A1E;
  --whatsapp:         #128C4A; /* branco sobre ele 4,3:1 */

  /* ---- tinta ---- */
  --tinta:       #3A322E;
  --tinta-forte: #2B2420;
  --tinta-suave: #6B5F57;
  --linha:       rgba(58, 50, 46, .14);

  /* ---- tipografia ---- */
  --f-display: "Amatic SC", "Chalkboard SE", "Comic Neue", cursive;
  --f-texto:   "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(3.1rem, 1.9rem + 5.4vw, 6rem);
  --fs-h2:      clamp(2.7rem, 1.9rem + 3.2vw, 4.2rem);
  --fs-h3:      clamp(2rem, 1.7rem + 1.1vw, 2.6rem);
  --fs-lead:    clamp(1.14rem, 1.06rem + .38vw, 1.34rem);
  --fs-texto:   1.0625rem;
  --fs-pequeno: .9375rem;
  --fs-etiqueta:.78rem;

  /* ---- espaço ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem; --s-8: 4rem;   --s-9: 6rem;
  --secao: clamp(4.25rem, 3rem + 5.5vw, 8rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --largura: 1180px;
  --largura-texto: 36rem;

  /* ---- forma ---- */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px;
  --r-tecla: 999px 999px var(--r-md) var(--r-md);  /* arco no topo, como a tecla */
  --sombra-suave: 0 1px 2px rgba(58,50,46,.06), 0 8px 24px -8px rgba(58,50,46,.18);
  --sombra-cartao: 0 1px 2px rgba(58,50,46,.05), 0 18px 40px -18px rgba(58,50,46,.28);

  /* ---- movimento ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-rapido: .18s;
  --t-medio: .5s;
}