/* ============================================================
   GRUPO CONNEXUS · BEBÊ BOMBOM — DESIGN TOKENS
   Fonte única de verdade para desktop-experience.css,
   mobile-experience.css e internal.css.
   Baseado no Design System "Encontro das Águas".
   ============================================================ */

:root {
  /* ---------- Tipografia ---------- */
  --font-bb: 'Baloo 2', 'Segoe UI Rounded', system-ui, sans-serif;
  --font-cx: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', Consolas, monospace;

  /* ---------- Cores · Bebê Bombom ---------- */
  --bb-tinta-950: #0E1C30;
  --bb-tinta-800: #1A3257;
  --bb-azul-500: #2C5492;
  --bb-vermelho-600: #CA333A;
  --bb-vermelho-500: #E0483E;
  --bb-coral-500: #FF6F5E;
  --bb-coral-600: #F0503E;
  --bb-morango-500: #F2557A;
  --bb-amarelo-400: #FFD166;
  --bb-verde-400: #6FCF97;
  --bb-creme-100: #FFF6E9;
  --bb-creme-50: #FFFBF3;
  --bb-card-bg: rgba(255, 255, 255, 0.85);

  /* ---------- Cores · Connexus ---------- */
  --cx-negro-950: #070B12;
  --cx-negro-900: #0E1626;
  --cx-navy-900: #0E1626; /* alias legado de --cx-negro-900, usado em algumas regras */
  --cx-negro-850: #141F36;
  --cx-indigo-700: #1E3A5F;
  --cx-azul-600: #2E5E92;
  --cx-azul-500: #3E82C4;
  --cx-azul-400: #5FA3E6;
  --cx-azul-100: #D8E8F8;
  --cx-laranja-600: #E6680B;
  --cx-laranja-500: #F58634;
  --cx-laranja-400: #F2B07E;
  --cx-laranja-texto: #BF5609;
  --cx-branco-100: #F3F6FA;
  --cx-texto-secundario: #B0C9E2;
  --cx-card-bg: rgba(16, 24, 42, 0.75);

  /* ---------- Cores · Grupo & Conexão ---------- */
  --grupo-ouro-500: #DE9A49;
  --grupo-ouro-400: #F2B366;
  --grupo-ouro-600: #C67C24;
  --grupo-marinho-900: #142F48;
  --grupo-marinho-800: #1A3C5C;

  /* ---------- Neutros ---------- */
  --neutro-950: #1B1B1D;
  --neutro-800: #33322F;
  --neutro-700: #4F4D4A;
  --neutro-600: #6B6864;
  --neutro-400: #A6A29C;
  --neutro-200: #E4E0D8;
  --neutro-100: #F1EEE7;
  --neutro-0: #FFFFFF;

  /* ---------- Paleta das salinhas (identidade das turmas Bebê Bombom) ---------- */
  --sala-azul: #5EC3E0;

  /* ---------- Gradientes ---------- */
  --grad-encontro: linear-gradient(120deg, #FF6F5E 0%, #F58634 30%, #DE9A49 50%, #3E82C4 75%, #142F48 100%);
  --grad-conexao: linear-gradient(90deg, #CA333A 0%, #F58634 50%, #3E82C4 100%);
  --grad-grupo: linear-gradient(135deg, #DE9A49 0%, #F58634 100%);
  --grad-ouro: linear-gradient(135deg, #DE9A49 0%, #F58634 100%);
  --grad-bb: linear-gradient(135deg, #FF6F5E 0%, #F2557A 100%);
  --grad-bb-hero: linear-gradient(165deg, #FFFBF3 0%, #FFF3E3 60%, #FFE8D6 100%);
  --grad-cx-hero: linear-gradient(165deg, var(--cx-negro-950) 0%, var(--cx-negro-900) 50%, #16263D 100%);
  --grad-cx-linha: linear-gradient(90deg, transparent, #F58634 35%, #3E82C4 72%, transparent);

  /* ---------- Sombras & Profundidade ---------- */
  --shadow-editorial: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-btn: 0 12px 28px -6px rgba(245, 134, 52, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-conhecer: 0 14px 32px -8px rgba(30, 58, 95, 0.7), 0 0 0 1px rgba(222, 154, 73, 0.35);
  --shadow-card-dark: 0 20px 40px -10px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.12);
  --shadow-cx-card: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-bb-card: 0 14px 35px rgba(202, 51, 58, 0.08);
  --shadow-bb: 0 12px 32px -8px rgba(255, 111, 94, 0.38), 0 2px 8px -2px rgba(43, 22, 14, 0.18);
  --shadow-cx: 0 12px 32px -8px rgba(62, 130, 196, 0.35), 0 2px 8px -2px rgba(7, 11, 18, 0.5);

  /* ---------- Bordas ---------- */
  --radius-hero-card: 20px;
  --radius-bb: 22px;
  --radius-cx: 14px;
  --radius-cx-md: 10px;
  --radius-pill: 9999px;

  /* ---------- Transições ---------- */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Skip link (acessibilidade: pular pro conteúdo) ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  background: var(--grupo-ouro-500);
  color: var(--cx-negro-950);
  font-family: var(--font-body);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top 0.2s var(--ease-soft);
}

.skip-link:focus {
  top: 1rem;
}