/* =============================================================================
   BREAKPOINTS — Palette canônica de viewports
   =============================================================================
   Reduzimos os ~16 breakpoints arbitrários do legado para 6 valores fixos,
   consistentes com Material Design / Tailwind e suficientes pra cobrir 99%
   dos devices reais (2024 statcounter):

     ┌──────────┬───────────┬─────────────────────────────────────────────┐
     │ token    │ valor     │ uso típico                                  │
     ├──────────┼───────────┼─────────────────────────────────────────────┤
     │ --bp-xs  │ 360px     │ Mobile S (iPhone SE / Galaxy S8)            │
     │ --bp-sm  │ 480px     │ Mobile M (iPhone 12 mini, Pixel 5)          │
     │ --bp-md  │ 640px     │ Mobile L / phablets (iPhone Pro Max)        │
     │ --bp-lg  │ 768px     │ Tablet portrait (iPad)                      │
     │ --bp-xl  │ 1024px    │ Tablet landscape / desktop pequeno          │
     │ --bp-2xl │ 1280px    │ Desktop padrão                              │
     │ --bp-3xl │ 1440px    │ Desktop wide                                │
     └──────────┴───────────┴─────────────────────────────────────────────┘

   USO em @media:
     CSS custom properties NÃO funcionam dentro de @media (max-width: var(...))
     porque a query é resolvida no parse stage, antes da resolução de vars.
     Mantemos esses valores aqui pro time documentar/referenciar — em @media
     usamos os literais (em rem para respeitar zoom do usuário).

   PADRÃO de @media a usar daqui em diante:
     @media (min-width: 22.5rem)  -- 360px  --bp-xs
     @media (min-width: 30rem)    -- 480px  --bp-sm
     @media (min-width: 40rem)    -- 640px  --bp-md
     @media (min-width: 48rem)    -- 768px  --bp-lg
     @media (min-width: 64rem)    -- 1024px --bp-xl
     @media (min-width: 80rem)    -- 1280px --bp-2xl
     @media (min-width: 90rem)    -- 1440px --bp-3xl

   Para viewport-down: trocar `min-width: Xrem` por `max-width: (X - 0.001)rem`
   (ex.: max-width: 47.999rem). Evite usar 47.99rem — perde precisão; já
   convertemos os existentes no audit.
   ============================================================================= */

@layer theme {
  :root {
    --bp-xs:  22.5rem;  /* 360px  */
    --bp-sm:  30rem;    /* 480px  */
    --bp-md:  40rem;    /* 640px  */
    --bp-lg:  48rem;    /* 768px  */
    --bp-xl:  64rem;    /* 1024px */
    --bp-2xl: 80rem;    /* 1280px */
    --bp-3xl: 90rem;    /* 1440px */

    /* ─── Tokens fluidos derivados (clamp helpers) ───
       Pra padronizar padding lateral, gaps verticais entre seções e
       larguras-cap de containers narrativos. */

    /* Padding lateral consistente entre seções: 24px no mobile, 5vw no
       intermediário, capando em 100px no desktop. Use sempre que precisar
       de padding horizontal de nível "section". */
    --section-padding-x: clamp(1.5rem, 5vw, 6.25rem);

    /* Gap vertical entre dobras: 64px no mobile → 144px no desktop. */
    --section-gap-y: clamp(4rem, 8vw, 9rem);

    /* Largura ideal de bloco narrativo (texto contínuo) — entre 540 e 720px
       de desktop. Use em description blocks pra evitar linhas > 75 char. */
    --measure-narrative: clamp(20rem, 50vw, 45rem);

    /* Largura cap de prose (descrições curtas que servem subtítulo). */
    --measure-prose-short: 33.75rem;  /* 540px — match com headings atuais */

    /* ─── Icon size tokens ───
       Padronizam tamanhos de ícone usados em badges, pills, botões, etc.
       Antes: width/height hardcoded (16, 20, 24, 32, 48px) espalhados.
       Use estes tokens daqui em diante; legacy fica até refator. */
    --icon-size-xs: 1rem;       /* 16px — ícones inline em texto pequeno */
    --icon-size-sm: 1.25rem;    /* 20px — chevrons, indicators de UI */
    --icon-size-md: 1.5rem;     /* 24px — ícones em listas, badges */
    --icon-size-lg: 2rem;       /* 32px — pills, action buttons */
    --icon-size-xl: 3rem;       /* 48px — hero icons, feature pills */

    /* ─── Radius hierarchy (3 níveis principais) ───
       Doc rápida pra escolher o nível certo. Os tokens granulares
       (--radius-xs..4xl) continuam disponíveis pra exceções. */
    --radius-component-sm: var(--radius-lg);   /* 8px  — botões, badges, pills */
    --radius-component-md: var(--radius-2xl);  /* 16px — cards, painéis */
    --radius-component-lg: var(--radius-3xl);  /* 24px — containers grandes, modal */

    /* ─── Hero rhythm tokens (subpages — tab-conversao layout) ───
       Governam o respiro vertical da hero das subpages (api-pix, conversao,
       conta-global, cartao, carteiras). Substituem a centralização vertical
       (que causava overflow atrás da nav em VHs médias/curtas) por um
       top-anchored com paddings/gap fluidos via clamp().

       Os clamps escalam suavemente entre mobile e desktop wide:
         min  → mobile portrait (~600px de altura)
         vh   → escala fluida pelo viewport
         max  → desktop 1440p+

       Esses tokens eliminam a necessidade da cascata de @media max-height
       (68.75rem / 56.25rem / 46.25rem) que existia antes.

       Inspiração: composição vertical do hero do Lumx — respiro generoso
       entre nav→título e entre CTA→componente principal.            */
    --hero-pad-top:    clamp(3.5rem, 8vh, 7.5rem);  /* 56–120px — nav → badge/h1   */
    --hero-mid-gap:    clamp(3rem,   6vh, 6rem);    /* 48–96px  — CTAs → exchange  */
    --hero-pad-bottom: clamp(3rem,   6vh, 5.5rem);  /* 48–88px  — exchange → footer */
  }
}