/* Papo de Infância — design system
   Peças do logo como linguagem: 4 cores de marca + uma 5ª (folha) para temas.
   Tipos: Baloo 2 (títulos, arredondada como o logo) + Atkinson Hyperlegible Next (texto, legível de madrugada). */

:root {
  --blue: #0b9be0;
  --pink: #ec1f7d;
  --grape: #7c3aa5;
  --sun: #ffb400;
  --leaf: #1fa774;

  --ink: #2a1f4a;
  --ink-2: #5d5480;
  --ink-3: #8c84a8;
  --paper: #ffffff;
  --mist: #f6f3fc;
  --mist-2: #efe9f9;
  --line: #e6e0f2;
  --on-ink: #ffffff;
  --shadow-c: 42 31 74;

  --f-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-text: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.625rem;
  --t-2xl: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  --t-3xl: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
  --t-hero: clamp(2.45rem, 1.3rem + 4.4vw, 4.6rem);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --pill: 999px;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --read-scale: 1;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #f2eefb;
  --ink-2: #c3bbdc;
  --ink-3: #958cb4;
  --paper: #171230;
  --mist: #201941;
  --mist-2: #2a2250;
  --line: #352c60;
  --on-ink: #171230;
  --shadow-c: 0 0 0;
  --blue: #3bb3f0;
  --pink: #ff4b98;
  --grape: #b47ee0;
  --sun: #ffc533;
  --leaf: #3fcb93;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2eefb;
    --ink-2: #c3bbdc;
    --ink-3: #958cb4;
    --paper: #171230;
    --mist: #201941;
    --mist-2: #2a2250;
    --line: #352c60;
    --on-ink: #171230;
    --shadow-c: 0 0 0;
    --blue: #3bb3f0;
    --pink: #ff4b98;
    --grape: #b47ee0;
    --sun: #ffc533;
    --leaf: #3fcb93;
    color-scheme: dark;
  }
}