/* ==========================================================================
   tokens.css — Design tokens (cores, tipografia, sombras, espaçamento)
   Fonte única da verdade do design system. Alterou aqui, mudou no site todo.
   ========================================================================== */

:root {
  /* -------------------- Cores -------------------- */
  --color-bg: #fdf4e3;
  --color-surface: #ffffff;
  --color-primary: #7b61ff;
  --color-primary-soft: #efe9ff;
  --color-coral: #ff6b6b;
  --color-yellow: #ffc93c;
  --color-yellow-soft: #fff6dd;
  --color-teal: #2ec4b6;
  --color-blue: #4dabf7;
  --color-lilac: #b197fc;
  --color-orange: #ff8a4c;
  --color-star: #ffb020;

  --color-text: #403a4e;
  --color-text-strong: #3c3650;
  --color-text-muted: #7d768c;
  --color-text-soft: #6b6480;

  /* Gradiente do Hero */
  --gradient-hero: linear-gradient(135deg, #f1e9ff 0%, #ffe7f1 48%, #e7f7ff 100%);

  /* -------------------- Tipografia -------------------- */
  --font-display: "Fredoka", sans-serif; /* Headlines */
  --font-body: "Nunito", sans-serif; /* Corpo */

  /* -------------------- Border radius -------------------- */
  --radius-card: 30px;
  --radius-card-lg: 40px;
  --radius-btn: 20px;
  --radius-pill: 999px;
  --radius-icon: 18px;

  /* -------------------- Sombras neomórficas -------------------- */
  --shadow-card: 14px 14px 34px rgba(173, 138, 82, 0.16),
    -10px -10px 26px rgba(255, 255, 255, 0.92),
    inset 4px 4px 10px rgba(255, 255, 255, 0.65),
    inset -6px -6px 14px rgba(173, 138, 82, 0.06);

  --shadow-card-sm: 13px 13px 30px rgba(173, 138, 82, 0.15),
    -9px -9px 24px rgba(255, 255, 255, 0.92),
    inset 4px 4px 10px rgba(255, 255, 255, 0.65),
    inset -6px -6px 13px rgba(173, 138, 82, 0.06);

  --shadow-card-lg: 18px 18px 44px rgba(173, 138, 82, 0.18),
    -12px -12px 30px rgba(255, 255, 255, 0.9),
    inset 4px 4px 12px rgba(255, 255, 255, 0.7),
    inset -8px -8px 18px rgba(173, 138, 82, 0.06);

  --shadow-nav: 10px 10px 26px rgba(173, 138, 82, 0.14),
    -8px -8px 20px rgba(255, 255, 255, 0.92),
    inset 3px 3px 8px rgba(255, 255, 255, 0.6),
    inset -4px -4px 10px rgba(173, 138, 82, 0.05);

  --shadow-btn: 8px 8px 18px rgba(123, 97, 255, 0.36),
    -4px -4px 12px rgba(255, 255, 255, 0.55),
    inset 3px 3px 7px rgba(255, 255, 255, 0.38),
    inset -5px -5px 12px rgba(60, 40, 150, 0.42);

  --shadow-btn-light: 8px 8px 20px rgba(40, 20, 90, 0.28),
    -4px -4px 12px rgba(255, 255, 255, 0.4),
    inset 3px 3px 7px rgba(255, 255, 255, 0.9),
    inset -5px -5px 12px rgba(123, 97, 255, 0.18);

  /* Ícone colorido genérico (preenchimento neomórfico) */
  --shadow-icon: 5px 5px 13px rgba(60, 40, 90, 0.18),
    -2px -2px 8px rgba(255, 255, 255, 0.45),
    inset 3px 3px 6px rgba(255, 255, 255, 0.4),
    inset -5px -5px 11px rgba(0, 0, 0, 0.16);

  /* -------------------- Espaçamento e layout -------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --section-gap: 104px;
  --gutter: 32px;
}