/* teiteikids — design tokens
   Fonte única de verdade para cor, tipo, espaço, cantos e movimento.
   Importe antes de qualquer outro CSS. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@400;600;700&display=swap');

:root {
  /* cor — paleta base */
  --tk-blue-600: #1B6BFF;
  --tk-blue-700: #1553C4;
  --tk-blue-400: #6BA5FF;
  --tk-blue-200: #A8CBFF;
  --tk-blue-100: #CFE2FF;
  --tk-blue-50:  #F2F7FF;
  --tk-navy-900: #0B2447;
  --tk-navy-400: #6B86A8;
  --tk-cyan-400: #38BDF8;
  --tk-yellow-400: #FFC93C;
  --tk-coral-400: #FF6B5A;
  --tk-white: #FFFFFF;
  --tk-border: #DFEAFB;

  /* cor — papéis */
  --color-bg: var(--tk-white);
  --color-bg-alt: var(--tk-blue-50);
  --color-surface: var(--tk-white);
  --color-surface-dark: var(--tk-navy-900);
  --color-text: var(--tk-navy-900);
  --color-text-muted: var(--tk-navy-400);
  --color-text-on-dark: var(--tk-white);
  --color-primary: var(--tk-blue-600);
  --color-primary-hover: var(--tk-blue-700);
  --color-on-primary: var(--tk-white);
  --color-accent: var(--tk-cyan-400);
  --color-highlight: var(--tk-yellow-400);
  --color-badge: var(--tk-coral-400);
  --color-border: var(--tk-border);
  --color-focus: var(--tk-cyan-400);

  /* tipografia */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --text-display: 3.5rem;
  --text-h1: 2.5rem;
  --text-h2: 1.75rem;
  --text-h3: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --measure: 68ch;

  /* espaço */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* cantos */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* sombras — sempre tingidas de azul-marinho */
  --shadow-sm: 0 2px 6px rgba(11, 36, 71, 0.08);
  --shadow-md: 0 8px 20px rgba(11, 36, 71, 0.10);
  --shadow-lg: 0 16px 40px rgba(11, 36, 71, 0.14);

  /* movimento */
  --ease-swim: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --nudge: 4px;
}

@media (max-width: 640px) {
  :root {
    --text-display: 2.5rem;
    --text-h1: 1.875rem;
    --text-h2: 1.5rem;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
}
h2, h3 { font-weight: 700; line-height: var(--leading-snug); }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p  { max-width: var(--measure); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* gesto característico: tudo desliza na direção em que o mascote aponta */
.nudge-on-hover {
  transition: transform var(--dur-base) var(--ease-swim),
              box-shadow var(--dur-base) var(--ease-swim);
}
.nudge-on-hover:hover { transform: translateX(var(--nudge)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .nudge-on-hover:hover { transform: none; }
}