/* ==========================================================================
   SKEENS — DESIGN TOKENS
   Fonte da verdade visual: mockup aprovado da home (2026-07-16).
   Paleta: o MIV da marca declara a paleta "infinita" (qualquer cor que
   exista na natureza da fruta pode entrar). Os hex abaixo são a leitura
   provisória do mockup + continuidade com o app já publicado em
   tipografruta.skeens.com.br — ajustar aqui se vier um guia de cor fechado.
   ========================================================================== */

@font-face {
  font-family: 'Cayento';
  src: url('../assets/fonts/Cayento.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('../assets/fonts/PP Neue Montreal-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/PP Neue Montreal-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tarif Arabic';
  src: url('../assets/fonts/TarifArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tarif Arabic';
  src: url('../assets/fonts/TarifArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tarif Arabic';
  src: url('../assets/fonts/TarifArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chantal Medium Italic';
  src: url('../assets/fonts/fonnts.com-Chantal_Medium_Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* usada só p/ números de destaque (ex: provocação "100%/0%") — a Cayento
   é uma versão de teste com watermark nos numerais/%, e a Tarif Arabic
   não tem o glifo do "0" certo, então essa é a mais pesada que sobra */
@font-face {
  font-family: 'Chunkfive Ex';
  src: url('../assets/fonts/Chunkfive Ex.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Cor ---------- */
  --skns-vermelho: #E8223A;
  --skns-amarelo:  #F7C600;
  --skns-verde:    #4C9A2E;
  --skns-laranja:  #FC8C06;
  --skns-preto:    #0A0A0A;
  --skns-creme:    #F4EFE1;
  --skns-branco:   #FFFFFF;

  /* fundos dos cards de sabor — cor complementar à cor do PRÓPRIO personagem
     (teoria das cores), pra ele se destacar em vez de se misturar ao fundo */
  --skns-card-morango: #2F8F4E; /* verde, complementar ao vermelho do morango */
  --skns-card-manga:   #2B6CB0; /* azul, complementar ao laranja da manga */
  --skns-card-kiwi:    #C2185B; /* magenta/berry, contrasta com o marrom/verde do kiwi */
  --skns-card-abacaxi: #6A3FA0; /* roxo, complementar ao amarelo do abacaxi */

  /* ---------- Tipografia ---------- */
  --font-display:  'Cayento', 'Arial Black', sans-serif;      /* headers */
  --font-body:     'PP Neue Montreal', Arial, Helvetica, sans-serif; /* corpo de texto */
  --font-subtitle: 'Tarif Arabic', Georgia, serif;             /* subtítulos */
  --font-hand:     'Chantal Medium Italic', 'Segoe Script', cursive; /* anotações manuscritas */
  --font-numeric:  'Chunkfive Ex', Georgia, serif; /* números de destaque (a Cayento tem watermark nos numerais) */
  --font-slab:     'Amazing Slab', Georgia, serif; /* codinomes de sabor — TODO: arquivo da fonte ainda não recebido, caindo no fallback serif */

  /* ---------- Espaço (escala modular ~1.5) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --block-padding-y: clamp(3rem, 8vw, 7rem);
  --container-max: 1280px;
  --container-pad: var(--space-md);

  /* margem de segurança do logo — NÃO NEGOCIÁVEL, nunca reduzir via override local */
  --logo-safe-area: clamp(1rem, 3vw, 2rem);

  --radius-pill: 999px;
  --radius-card: 20px;

  /* ---------- Elevação / bordas ---------- */
  --border-thick: 3px;
  --shadow-card: 0 6px 18px rgba(10, 10, 10, 0.16);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}