/* =====================================================================
       VARIÁVEIS GLOBAIS
       ===================================================================== */
    :root {
      --purple-deep: #241533;
      --purple-deep2: #1a0f26;
      --purple: #3a2456;
      --purple-mid: #55366f;
      --purple-light: #7a5296;
      --gold: #f4c94a;
      --gold-light: #ffe28f;
      --gold-deep: #e0a62e;
      --amber-soft: rgba(244, 201, 74, 0.12);
      --cream: #fbf5e8;
      --cream-soft: rgba(251, 245, 232, 0.68);
      --cream-faint: rgba(251, 245, 232, 0.4);
      --card-bg: rgba(255, 255, 255, 0.045);
      --card-bg-2: rgba(255, 255, 255, 0.07);
      --card-border: rgba(244, 201, 74, 0.16);
      --card-border-hover: rgba(244, 201, 74, 0.32);
      --yes: #b7d8a3;
      --no: #d98c8c;
      --serif: 'Fraunces', Georgia, serif;
      --sans: 'Poppins', 'Segoe UI', sans-serif;
      --sb-w: 300px;
      --ftr-h: clamp(38px, 5vh, 52px);
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --radius: 16px;
      --vh-safe: 100vh;
      --vw-safe: 100vw;

      /* Escala de espaçamento — única fonte de verdade para gaps/paddings */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 20px;
      --sp-6: 24px;
      --sp-7: 32px;
      --sp-8: 40px;

      /* Escala de raio — cantos consistentes em cards, botões e chips */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: var(--radius);
      --radius-pill: 999px;

      /* Escala de sombra — profundidade consistente entre componentes */
      --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
      --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);
      --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);

      /* Escala tipográfica — tamanhos reutilizados em títulos, rótulos e corpo */
      --text-2xs: 0.66rem;
      --text-xs: 0.72rem;
      --text-sm: 0.82rem;
      --text-base: 0.95rem;
      --text-lg: 1.1rem;
      --text-xl: 1.35rem;
    }

    @supports (height: 100dvh) {
      :root {
        --vh-safe: 100dvh;
        --vw-safe: 100dvw;
      }
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
    }

    body {
      background: radial-gradient(ellipse 120% 90% at 15% 0%, var(--purple-mid) 0%, var(--purple-deep) 55%, var(--purple-deep2) 100%);
      color: var(--cream);
    }

    button {
      font-family: var(--sans);
      cursor: pointer;
    }

    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(244, 201, 74, 0.25);
      border-radius: 10px;
    }

    /* App instalado (PWA): sem "puxar para atualizar" nem efeito elástico, que
       recarregariam a página e perderiam um cronômetro em andamento */
    @media (display-mode: standalone), (display-mode: fullscreen) {
      html,
      body {
        overscroll-behavior-y: none;
      }
    }