/* ============================================================
   Bixos & Sons — Design Tokens
   Sistema visual "Bubble Garden"
   ------------------------------------------------------------
   Esta é a fonte da verdade do design system. Nenhum valor
   bruto (cor, espaço, raio, duração) deve aparecer fora daqui.
   Componentes consomem apenas var(--token).
   ============================================================ */

:root {
  /* --- Paleta base (oficial CLAUDE.md) -------------------- */
  --color-sky:    #cfe6f5; /* céu — fundo superior, gradiente */
  --color-grass:  #b8d97c; /* grama — chão, áreas verdes */
  --color-cream:  #faf3e3; /* creme — bolhas dos animais, cards */
  --color-barn:   #d36a52; /* celeiro — botões primários, destaques */
  --color-sun:    #ffd66e; /* sol — acentos, brilhos */
  --color-ink:    #3d2f22; /* tinta — textos, bordas */

  /* --- Variações de suporte ------------------------------- */
  --color-cream-soft:  #fdfaf0;
  --color-cream-deep:  #f3e9cf;
  --color-grass-soft:  #d6e8a7;
  --color-grass-deep:  #9bbf5e;
  --color-sky-soft:    #e4f1f9;
  --color-sky-deep:    #a8d0e8;
  --color-barn-soft:   #e89580;
  --color-ink-soft:    #5c4a38;
  --color-ink-muted:   rgba(61, 47, 34, 0.55);
  --color-white:       #ffffff;
  --color-shadow-ink:  rgba(61, 47, 34, 0.18);

  /* --- Cores accent por animal (V1 — Fazenda) ------------- */
  /* Cada animal tem cor própria pra chip ABC, borda da bolha,
     letras de soletração e ondas sonoras. Tons pastel mantêm a
     vibe Bubble Garden infantil do mockup. */
  --accent-horse:   #d4a37a; /* bege couro suave */
  --accent-sheep:   #c8b88f; /* areia (lã pastel) */
  --accent-cow:     #f0b8b0; /* rosa-pêssego (manchas suaves) */
  --accent-pig:     #f5a8c0; /* rosa */
  --accent-duck:    #e8c45c; /* amarelo-ocre (bico) */
  --accent-chicken: #e89888; /* terracota suave (crista) */

  /* --- Cores accent por animal (V2 — Floresta) ------------ */
  /* Lobo e elefante são os 2 cinzas — diferenciados por viés
     (lobo azulado vs elefante rosado) pra criança não confundir. */
  --accent-lion:     #e8b54a; /* dourado-âmbar (juba) */
  --accent-wolf:     #8a9bb0; /* cinza-azulado (lobo cinzento) */
  --accent-elephant: #b0a89c; /* cinza-pedra rosado (paquiderme) */
  --accent-monkey:   #c08a4a; /* marrom-banana (pelagem) */
  --accent-owl:      #a085c8; /* púrpura-noturna (ave da noite) */
  --accent-bear:     #8a6a3a; /* marrom-escuro */

  /* --- Cores accent por animal (V2 — Bichinhos) ----------- */
  /* Alternadas quente/frio pra vizinhos no grid não se fundirem. */
  --accent-cat:      #e8a85c; /* laranja-mel (gato laranja) */
  --accent-dog:      #c2925e; /* marrom-caramelo */
  --accent-parakeet: #6fb0d6; /* azul-céu (periquito) */
  --accent-parrot:   #5fbf7a; /* verde-tropical (papagaio) */
  --accent-mouse:    #b0a89e; /* cinza-quente (ratinho) */
  --accent-rabbit:   #dca6c2; /* rosa-suave */

  /* --- Cores accent por animal (V2 — Mar) ----------------- */
  /* Mundo puxa pro azul; pinguim (laranja) e lontra (marrom)
     quebram pra vizinhos no grid não se fundirem. */
  --accent-whale:     #3d6e9e; /* azul-marinho profundo */
  --accent-dolphin:   #6fc0d0; /* ciano claro */
  --accent-seal:      #9aa5ad; /* cinza-pedra */
  --accent-penguin:   #eaa64a; /* laranja-âmbar (bico/pés) */
  --accent-polarbear: #b8cdda; /* azul-gelo claro */
  --accent-otter:     #b08a5c; /* marrom-quente */

  /* --- Cores accent por instrumento (V2 — Instrumentos) --- */
  /* Tons festivos variados pra vizinhos no grid se distinguirem. */
  --accent-guitar: #c2563f; /* vermelho-tijolo (corpo) */
  --accent-drum:   #e0863a; /* laranja-tambor */
  --accent-piano:  #5f6fc0; /* azul-índigo */
  --accent-flute:  #5aa0c0; /* azul-claro */
  --accent-horn:   #e0a838; /* dourado-âmbar (corneta) */
  --accent-violin: #a8623a; /* marrom-madeira */

  /* --- Cores accent por veículo (V2 — Veículos) ---------- */
  /* Variedade quente+fria pra vizinhos no grid se distinguirem. */
  --accent-car:        #d6483f; /* vermelho-clássico */
  --accent-motorcycle: #e0763a; /* laranja-vibrante */
  --accent-truck:      #d4a838; /* amarelo-mostarda */
  --accent-train:      #8a5a3f; /* marrom-locomotiva */
  --accent-plane:      #5a92c2; /* azul-céu */
  --accent-boat:       #4a9b8a; /* verde-mar */

  /* --- Cores accent por elemento natural (V2 — Natureza) -- */
  --accent-rain:    #5a8ec0; /* azul-chuva */
  --accent-thunder: #e8c44a; /* amarelo-elétrico (raio) */
  --accent-wind:    #b8c8d0; /* cinza-azulado claro */
  --accent-fire:    #e85a3a; /* vermelho-laranja fogo */
  --accent-wave:    #6fb0d0; /* azul-água */
  --accent-volcano: #b85a3f; /* vermelho-lava */

  /* --- Cores accent por MUNDO (V2 — menu de mundos) ------- */
  /* Cada mundo tem cor própria pra moldura do card e tom de
     ambiente. Tons pastel mantêm a vibe Bubble Garden. Lobo
     (wild) vs Veículos (azul) bem distintos pra criança não
     confundir. Free destacado em verde-grama (cor base do app). */
  --accent-world-farm:        #b8d97c; /* grama (cor base) */
  --accent-world-wild:        #7ab57a; /* verde-floresta profundo */
  --accent-world-pets:        #f5b0a8; /* coral-rosado */
  --accent-world-instruments: #c8a8e0; /* roxo pastel */
  --accent-world-vehicles:    #8bb8e0; /* azul-céu mais saturado */
  --accent-world-sea:         #3d92bf; /* azul-oceano (substituiu Natureza) */
  --accent-world-nature:      #6fb89a; /* verde-paisagem (substituiu Comidinhas) */
  --accent-world-vote:        #ffd66e; /* amarelo-sol — destaque "novidade" do card coringa (8º slot) */

  /* Cor especial pro cadeado dourado (badge premium). */
  --color-lock-gold:          #e8b937; /* mesmo tom do bico do pato */

  /* --- Gradientes do cenário ------------------------------ */
  --gradient-sky-to-grass:
    linear-gradient(180deg, var(--color-sky) 0%, var(--color-sky-soft) 45%, var(--color-grass-soft) 65%, var(--color-grass) 100%);

  /* Gradient da Floresta — céu mais quente (sol filtrando entre
     folhas) no topo, verde-floresta profundo no chão. Diferencia
     visualmente da Fazenda mantendo a vibe Bubble Garden. */
  --gradient-canopy-to-forest:
    linear-gradient(180deg, #f5e8b8 0%, #c8dba0 30%, #8fb86a 65%, #5a8a3a 100%);

  /* Gradient de Bichinhos — interior aconchegante de casa: parede
     creme/pêssego no topo descendo pra um tom coral quente (tapete).
     Diferencia da Fazenda (céu/grama) e da Floresta (verde) mantendo
     a vibe Bubble Garden acolhedora. */
  --gradient-cozy-home:
    linear-gradient(180deg, #fbeee0 0%, #f7e0d0 35%, #f0c8b8 70%, #e8b0a0 100%);

  /* Gradient do Mar — superfície clara descendo pro fundo do oceano
     (sensação de mergulho). Tons de azul, areia clara no rodapé via
     cenário. Diferencia dos mundos terrestres. */
  --gradient-ocean:
    linear-gradient(180deg, #aee0f0 0%, #6bb8d8 35%, #3d8ab8 70%, #1f5a88 100%);

  /* Gradient de Instrumentos — palco de festa: lilás claro no topo
     descendo pra roxo festivo. Casa com --accent-world-instruments. */
  --gradient-party:
    linear-gradient(180deg, #f3e6fa 0%, #ddc4ee 38%, #bd9ce0 72%, #8e6abe 100%);

  /* Gradient de Veículos — céu aberto pra rua/voo/mar. Azul claro
     descendo pra horizonte clarinho com toque verde-suave de chão
     ao longe (asfalto e detalhes via cenário). */
  --gradient-open-sky:
    linear-gradient(180deg, #aee0f5 0%, #c8e7f8 38%, #e6f1f8 72%, #d4dfd0 100%);

  /* Gradient de Natureza — paisagem aberta: céu azul-claro descendo
     pra horizonte clarinho com toque dourado e verde-paisagem no
     chão. Casa com colinas silhueta + vulcão no cenário. */
  --gradient-landscape:
    linear-gradient(180deg, #aae0f5 0%, #ddedf5 35%, #f0e8c8 65%, #bcd0a0 100%);
  --gradient-rainbow-bs:
    /* logotipo B&S — círculo arco-íris */
    conic-gradient(from 220deg, #ff6e6e, #ffb86e, var(--color-sun), var(--color-grass), var(--color-sky-deep), #b896e0, #ff6e6e);

  /* --- Tipografia ---------------------------------------- */
  --font-family-base:
    'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: var(--font-family-base);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Escala tipográfica (rem; 1rem = 16px) */
  --font-size-xs:   0.75rem;   /* 12 — micro hint  */
  --font-size-sm:   0.875rem;  /* 14 — chip ABC, label secundário */
  --font-size-base: 1rem;      /* 16 — corpo */
  --font-size-md:   1.125rem;  /* 18 — pílula de módulo */
  --font-size-lg:   1.25rem;   /* 20 — botões CTA */
  --font-size-xl:   1.5rem;    /* 24 — headings em página */
  --font-size-2xl:  2rem;      /* 32 — letra de soletração mobile */
  --font-size-3xl:  2.5rem;    /* 40 — letra de soletração tablet/desktop */
  --font-size-4xl:  3.25rem;   /* 52 — logo grande */

  --line-height-tight:   1.15;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-wide:   0.06em; /* letras de soletração */

  /* --- Espaçamento (escala de 4px) ------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Gap motricidade fina (3-4 anos): animal → chip ABC
     CLAUDE.md exige >= 14-18px; usamos 14px (limite inferior)
     pra ganhar altura vertical com 3 fileiras (pós-galinha). */
  --gap-animal-to-chip: 0.875rem;

  /* --- Border radius ------------------------------------- */
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     32px;
  --radius-pill:   9999px;
  --radius-bubble: 50%; /* círculo perfeito da bolha do animal */

  /* --- Sombras ------------------------------------------- */
  --shadow-xs:     0 1px 2px rgba(61, 47, 34, 0.06);
  --shadow-sm:     0 2px 6px rgba(61, 47, 34, 0.08);
  --shadow-md:     0 4px 12px rgba(61, 47, 34, 0.12);
  --shadow-lg:     0 8px 24px rgba(61, 47, 34, 0.16);
  --shadow-xl:     0 12px 32px rgba(61, 47, 34, 0.20);
  --shadow-bubble: 0 8px 20px rgba(61, 47, 34, 0.18);   /* bolha do animal em repouso */
  --shadow-chip:   0 2px 6px rgba(61, 47, 34, 0.10);    /* chip ABC */
  --shadow-cta:    0 6px 16px rgba(211, 106, 82, 0.30); /* CTA cor celeiro */

  /* --- Alvos de toque (UX criança 2-4 anos) -------------- */
  /* Regra dura CLAUDE.md: animais >= 100x100px.
     ChipABC altura 44-58-80px (mobile/tablet/desktop). */
  --touch-target-min:     100px;
  --touch-target-chip-mobile:  44px;
  --touch-target-chip-tablet:  58px;
  --touch-target-chip-desktop: 80px;

  /* Tamanho da bolha por breakpoint (do mockup Bubble Garden) */
  /* Reduzido em tablet/desktop após adição da galinha (3 fileiras
     forçariam scroll vertical com os tamanhos antigos 168/156). */
  --bubble-size-mobile:  124px;
  --bubble-size-tablet:  148px;
  --bubble-size-desktop: 140px;

  /* --- Durações de animação ------------------------------ */
  /* Princípio: feedback < 90ms (criança não percebe atraso).
     Soletração com cadência longa pra dar tempo de processar. */
  --duration-instant:        90ms;   /* feedback de toque (scale + pulse) */
  --duration-fast:           180ms;
  --duration-base:           250ms;  /* intro de letra de soletração */
  --duration-medium:         350ms;
  --duration-slow:           500ms;  /* pausa antes da palavra inteira */
  --duration-spell-stagger:  35ms;   /* cascata entre letras */
  --duration-spell-letter:   650ms;  /* intervalo entre cada letra aparecer */
  --duration-breathing:      3200ms; /* respiração passiva (1 ciclo) */

  /* --- Easing (curvas) ----------------------------------- */
  --ease-soft:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:   cubic-bezier(0.5, 1.5, 0.5, 1);   /* overshoot suave de brinquedo */
  --ease-spell:    cubic-bezier(0.34, 1.56, 0.64, 1); /* letra entrando em chip */

  /* --- Z-index (stacking discreto) ----------------------- */
  --z-scenery:        1;   /* fundo, cenário, decorações */
  --z-stage:          10;  /* palco com as bolhas */
  --z-mascot:         20;  /* Pipo (sempre acima do cenário, abaixo do topbar) */
  --z-topbar:         100; /* FarmTopBar (botão home, pílula) */
  --z-spell-overlay:  1000;

  /* --- Efeitos especiais --------------------------------- */
  --blur-spell:    10px;   /* backdrop blur do SpellMode */
  --opacity-faded: 0.6;    /* outros animais durante toque de um */
  --opacity-disabled: 0.65;
  --filter-disabled: grayscale(0.35);

  /* --- Breakpoints (apenas referência — usar em @media) -- */
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
}

/* Respeito a usuários com preferência de menos movimento.
   Mantemos os tokens, mas neutralizamos durações.
   (O reset.css também aplica essa regra ao DOM.) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:       1ms;
    --duration-fast:          1ms;
    --duration-base:          1ms;
    --duration-medium:        1ms;
    --duration-slow:          1ms;
    --duration-spell-stagger: 1ms;
    --duration-spell-letter:  1ms;
    --duration-breathing:     1ms;
  }
}