/* Studio Mirla Thaise Nail Designer (demonstração, spec 2026-11-14), opção C "laranja e nude" escolhida
   em 14/11: fundo nude rosado (o tom das unhas dela), laranja da marca e a letra do logo, Poppins
   (Light espaçada nos títulos, como "Mirla Thaise" no logo; Regular/Medium no texto).
   Contrastes: texto #3A2924 sobre o fundo > 12:1; --cor-texto-3 #765A50 passa de 4,5:1 até sobre --cor-superficie-2 (MarcaPacoteTest confere os pares); o botão é um laranja um
   pouco mais fechado (#BD5A1C) para a letra branca passar de 4,5:1. O laranja do logo (#E07A2E) só existe
   nos ícones do app e da aba (icones/*.png, gerados com --fundo=#E07A2E); na tela todo destaque usa
   --cor-champagne* (nome herdado dos tokens: é "a cor de destaque da marca", aqui laranja).
   cor_tema em includes/marca.php = --cor-fundo daqui (mudou um, mude o outro).
   Poppins: @fontsource/poppins 5.0.8, latin, licença OFL em fontes/OFL.txt.

   Como o logo e os ícones foram gerados (área x,y,largura,altura sobre a imagem de 1179 px):
     php scripts/recortar_logo.php database/implantar/mirla-thaise/origem/logo-circulo.jpg \
       assets/marcas/mirla-thaise/logo.png --area=260,470,670,370 --por=brilho --de=175 --ate=225 \
       --cor=#9A4A14 --altura=176
   O ícone do app é só a assinatura "MT": os textos pequenos (STUDIO, Mirla Thaise, NAIL DESIGNER) são
   pintados de laranja numa cópia da origem (retângulos 400,735,110,35 · 405,768,205,36 ·
   662,768,250,36 · 715,800,195,32), depois o mesmo recorte com --cor=#FFFFFF e
     php scripts/gerar_icones_app.php mirla-thaise --imagem=<mt.png> --fundo=#E07A2E
   --por=brilho separa a assinatura branca do laranja do círculo.
   Fotos dos serviços: só unhas nude/francesinha recortadas dos mosaicos dela, para a vitrine ficar num tom
   só; áreas e comando em database/implantar/mirla-thaise/recortar_servicos.php. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fontes/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/poppins-latin-600-normal.woff2") format("woff2"); }

:root {
  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cor-fundo: #FBF3EF;
  --cor-superficie: #F4E4DC;
  --cor-superficie-2: #EDD7CC;
  --cor-linha: #EED9CF;
  --cor-linha-forte: #DDBFB1;

  --cor-texto: #3A2924;
  --cor-texto-2: #6E544B;
  --cor-texto-3: #765A50;
  --cor-texto-desabilitado: #A18A80;
  --cor-desabilitado-fraco: #C0AAA0;

  --cor-champagne: #BD5A1C;
  --cor-champagne-hover: #A84E16;
  --cor-champagne-suave: #F9DECD;
  --cor-champagne-texto: #9C4716;
  --cor-texto-sobre-destaque: #FFFFFF;

  --cor-ilustracao-vazia: #E3B79E;

  --sombra-1: 0 1px 2px rgba(58, 41, 36, .04), 0 2px 8px rgba(58, 41, 36, .04);
  --sombra-2: 0 12px 32px rgba(58, 41, 36, .10);

  --cor-foco-anel: rgba(58, 41, 36, .08);
  --cor-painel-fundo-escuro: rgba(58, 41, 36, .36);
  --cor-nav-fundo: rgba(251, 243, 239, .96);
}

/* Títulos grandes em Poppins Light espaçada (como "Mirla Thaise" no logo); os médios em Medium.
   "body.nc" na frente: marca.css carrega antes de componentes.css, e com o mesmo peso perderia. */
body.nc .nc-display, body.nc .nc-titulo-1 { font-weight: 300; letter-spacing: .03em; }
body.nc .nc-titulo-2, body.nc .grupo-servicos__titulo { font-weight: 500; letter-spacing: .01em; }
/* Poppins Light é mais larga que a serifa original: no celular o título grande desce para 30 px. */
@media (max-width: 399px) { body.nc .nc-display { font-size: 30px; line-height: 36px; } }