/* ============================================================
   CRIANÇAS INTELIGENTES — DESIGN TOKENS
   Fonte única de verdade do visual do site.
   Regra: nenhum valor de cor, raio, sombra ou fonte é escrito
   solto no CSS. Se não existe token, cria-se um aqui.
   As regras estão no README.md ao lado.
   ============================================================ */

:root{

  /* ---------- MARCA ----------
     As cinco cores que definem o canal.                        */
  --sky:#3FB6E8;              /* azul principal — hero, links   */
  --sky-deep:#1E88C7;         /* azul de apoio — botões         */
  --sky-night:#155A8A;        /* azul escuro — seção contato    */
  --coral:#F2607C;            /* rosa de ação — CTA, ícones     */
  --coral-deep:#D8375A;       /* rosa escuro — sombra do CTA    */
  --sunshine:#FFD23D;         /* amarelo de destaque            */
  --sunshine-deep:#E0B21A;    /* amarelo escuro — sombra        */
  --leaf:#4CAF6D;             /* verde — usado na roda AEIOU    */

  /* ---------- RAMPA DE AZUL ----------
     Do mais claro ao mais fechado. Numeração no estilo 050–400:
     quanto maior, mais escuro.                                 */
  --sky-050:#EAF8FF;          /* texto sobre azul, fundos claros */
  --sky-100:#E1F2FB;          /* bordas de cards claros          */
  --sky-150:#cfeaf5;          /* placeholder das thumbs de vídeo */
  --sky-200:#BFEBFB;          /* topo do gradiente do "Sobre"    */
  --sky-300:#BFDCEE;          /* texto secundário sobre escuro   */
  --sky-400:#8FB6D1;          /* texto do rodapé                 */
  --sky-bright:#2FA6DE;       /* topo do gradiente do hero       */

  /* ---------- RAMPA DE CORAL ---------- */
  --coral-050:#FFE7EC;        /* fundo da pílula .kicker         */
  --coral-100:#FFE1E8;        /* texto claro sobre coral         */

  /* ---------- NEUTROS / SUPERFÍCIES ---------- */
  --cloud:#F5FBFF;            /* fundo geral da página           */
  --surface:#FFFFFF;          /* cards e seções claras           */
  --ink:#123152;              /* texto principal                 */
  --ink-soft:#3C6285;         /* texto secundário                */
  --ink-deep:#0F3A5C;         /* fim do gradiente do contato     */
  --video-bg:#000000;         /* tarja do player de vídeo        */

  /* ---------- TIPOGRAFIA ---------- */
  --font-title:'Baloo 2', cursive;
  --font-body:'Nunito', sans-serif;

  --text-xs:0.85rem;
  --text-sm:0.9rem;
  --text-md:0.95rem;
  --text-base:1.05rem;
  --text-lg:1.15rem;
  --text-xl:1.5rem;
  /* Fluidos: crescem com a largura da tela, sem media query.
     O maximo e o mesmo de sempre — acima de 1180px nada mudou. O que
     mudou foi o minimo, que era pensado so para desktop e chegava
     grande demais no celular (o h1 ocupava cinco linhas num iPhone). */
  --text-h2:clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  --text-h1:clamp(1.875rem, 1.2rem + 3vw, 3.4rem);
  --text-display:clamp(2.3rem, 1.4rem + 4vw, 4rem);

  /* ---------- RAIOS ---------- */
  --radius-xs:6px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-2xl:32px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* ---------- SOMBRAS ----------
     Duas famílias: "card" (difusa, para superfícies claras) e
     "float" (mais fechada, para elementos sobre o azul).       */
  --shadow-card:0 10px 24px rgba(20,90,130,0.10);
  --shadow-card-lg:0 18px 40px rgba(20,90,130,0.14);
  --shadow-float:0 6px 12px rgba(10,60,90,0.25);
  --shadow-float-lg:0 10px 24px rgba(10,60,90,0.30);
  --shadow-wheel:0 20px 40px rgba(10,60,90,0.35), inset 0 0 0 10px rgba(255,255,255,0.25);
  --shadow-video:0 24px 48px rgba(0,0,0,0.30);
  /* sombras "chapadas" dos botões — dão o ar de brinquedo */
  --shadow-btn:0 6px 0 var(--coral-deep);
  --shadow-btn-sun:0 5px 0 var(--sunshine-deep);

  /* ---------- MOVIMENTO ---------- */
  --dur-fast:.15s;
  --dur:.2s;
  --spin:22s;                 /* volta completa da roda AEIOU   */
  --bob:2.4s;                 /* sobe-e-desce das vogais         */

  /* ---------- LAYOUT ---------- */
  --wrap:1180px;              /* largura máxima do conteúdo      */
  --wrap-pad:24px;

  /* ---------- MEDIDAS QUE RESPONDEM À TELA ----------
     São os únicos tokens que trocam de valor: os @media do fim deste
     arquivo os redefinem. É de propósito — assim o styles.css continua
     escrito uma vez só, sem uma media query por elemento.            */
  --nav-logo-h:84px;          /* altura da logo na barra         */
  --nav-pad-y:12px;           /* respiro vertical da barra       */
  --pipo-size:192px;          /* Pipo do hero                    */
  --wheel-size:320px;         /* diâmetro da roda AEIOU          */
  --wheel-letter:76px;        /* círculo de cada vogal           */
  --wheel-center:128px;       /* botão de play no meio da roda   */
  --hero-pad-top:64px;
  --hero-pad-bottom:160px;    /* o azul que sobra abaixo da roda */
  --section-y:84px;           /* respiro vertical das seções     */

  /* Breakpoints em uso (o valor não pode virar token: CSS não aceita
     var() dentro de @media, então aqui eles são só referência):
     380px  = celular pequeno (iPhone SE, Galaxy S8)
     560px  = vitrine de vídeos vai a 1 coluna
     760px  = celular: entra o menu sanduíche
     860px  = grade do "Sobre" e do AEIOU empilha
     900px  = hero empilha
     960px  = vitrine de vídeos vai a 2 colunas
     1000px = redes sociais vão a 3 colunas                      */
}

/* ============================================================
   TELAS MENORES
   Só mexem em token. Nenhuma regra de layout mora aqui —
   quem usa estes valores é o css/styles.css.
   ============================================================ */

/* tablet em pé: o hero já empilhou, então o azul de sobra encolhe */
@media (max-width: 900px){
  :root{
    --hero-pad-bottom:72px;
    --section-y:72px;
  }
}

/* celular */
@media (max-width: 760px){
  :root{
    --wrap-pad:20px;
    --nav-logo-h:56px;
    --nav-pad-y:9px;
    --pipo-size:150px;
    --wheel-size:250px;
    --wheel-letter:62px;
    --wheel-center:96px;
    --hero-pad-top:28px;
    --hero-pad-bottom:44px;
    --section-y:56px;
  }
}

/* celular pequeno: a roda AEIOU precisa caber com folga nas laterais */
@media (max-width: 380px){
  :root{
    --nav-logo-h:50px;
    --pipo-size:130px;
    --wheel-size:224px;
    --wheel-letter:56px;
    --wheel-center:86px;
  }
}