/* Design tokens do QuemLevaOQuê. Todo valor visual repetido mora aqui. */
:root {
  color-scheme: light;

  /* Cores da marca (constituição). O teal puro só vale em texto grande
     (>= 24px, ou >= 18.66px em negrito): contraste ~3.6:1 sobre branco.
     Para texto comum, use --color-primary-strong (~5.8:1). */
  --color-primary: rgb(4 148 165);
  --color-primary-strong: rgb(3 112 125);
  --color-primary-soft: rgb(4 148 165 / 0.12);
  --color-secondary: rgb(144 37 151);
  --color-secondary-strong: rgb(118 28 124);
  --color-secondary-soft: rgb(144 37 151 / 0.1);
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  /* Neutros (o fundo creme vem da logo) */
  --color-bg: rgb(251 248 242);
  --color-surface: rgb(255 255 255);
  --color-surface-muted: rgb(244 239 230);
  --color-border: rgb(226 218 205);
  --color-text: rgb(38 32 44);
  --color-text-muted: rgb(98 90 104);
  --color-on-brand: rgb(255 255 255);

  /* Estados */
  --color-success: rgb(18 110 52);
  --color-success-soft: rgb(22 128 62 / 0.12);
  --color-warning: rgb(140 80 0);
  --color-warning-soft: rgb(246 185 27 / 0.2);
  --color-danger: rgb(190 30 45);
  --color-danger-soft: rgb(190 30 45 / 0.1);
  --color-sun: rgb(246 185 27);

  /* Tipografia (máximo de duas famílias) */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);
  --leading-tight: 1.15;
  --leading-normal: 1.55;

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Formas e profundidade */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(38 32 44 / 0.08);
  --shadow-md: 0 6px 18px rgb(38 32 44 / 0.08), 0 2px 4px rgb(38 32 44 / 0.05);
  --shadow-lg: 0 18px 40px rgb(38 32 44 / 0.12);
  --shadow-brand: 0 10px 24px rgb(4 148 165 / 0.3);

  /* Layout */
  --container-max: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --touch-target: 2.75rem;

  /* Movimento (CSS); as animações GSAP usam js/animations/config.js */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}