/* =========================================================
   BASE VISUAL — ETAPA 1 DO REDESIGN
   Fundação reutilizável (tipografia, spacing, container,
   radius, sombras, motion, foco e reduced-motion).

   Este arquivo define TOKENS e utilitários novos.
   Ele não força nenhum componente existente a adotá-los —
   as seções migram gradualmente nas próximas etapas.
   Cores ficam em css/theme.css (fonte única de cor).
========================================================= */

:root {
  /* ---------------------------------------------------
     TIPOGRAFIA
     Mesma família já usada no projeto (Inter). Escala
     pensada para Hero/H1/H2/H3/body/label/meta.
  --------------------------------------------------- */
  --font-base: 'Inter', sans-serif;

  --text-display: clamp(2.4rem, 1.7rem + 2.6vw, 3.75rem);
  --text-h1: clamp(2rem, 1.65rem + 1.4vw, 2.65rem);
  --text-h2: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem);
  --text-h3: 1.25rem;
  --text-body-lg: 1rem;
  --text-body: 0.97rem;
  --text-body-sm: 0.9rem;
  --text-label: 0.7rem;
  --text-meta: 0.78rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.14em;

  /* ---------------------------------------------------
     CONTAINER
  --------------------------------------------------- */
  --container-max: 1200px;
  --container-padding: clamp(20px, 5vw, 64px);

  /* ---------------------------------------------------
     SPACING (escala reutilizável — gaps, padding, margin)
  --------------------------------------------------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ---------------------------------------------------
     RADIUS
  --------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---------------------------------------------------
     SOMBRAS (usam --shadow-rgb, definido em theme.css,
     que já varia entre dark/light)
  --------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), 0.20);
  --shadow-md: 0 10px 30px rgba(var(--shadow-rgb), 0.30);
  --shadow-lg: 0 24px 60px rgba(var(--shadow-rgb), 0.35);

  /* ---------------------------------------------------
     MOTION BASE
  --------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --transition-fast: all var(--duration-fast) ease;
  --transition-base: all var(--duration-base) var(--ease-standard);
  --transition-slow: all var(--duration-slow) var(--ease-standard);
}

/* =========================================================
   BREAKPOINTS EM USO (referência — CSS não permite variável
   dentro de @media). Não alterar sem revisar css-mobile/*.

   768px  → css-mobile/hero-mobile.css,
            css-mobile/about_mindset-mobile.css,
            css-mobile/base-mobile.css (fundação global mobile — M1),
            css/nav.css, css/theme.css, css/contact.css (blocos mobile)
   900px  → css-mobile/stack-mobile.css,
            css-mobile/experience-mobile.css,
            css/hero.css (.hero-visual),
            minha-atuacao/pratica.css (pin off)
   680px  → css-mobile/stack-mobile.css (grid 2→1 coluna)
   640px  → minha-atuacao/pratica.css, minha-atuacao/cta-final.css
   769–1023px → css/about_mindset.css (.quality-flow, wrap de tablet)
   1024px → css/about_mindset.css (.quality-step, setas entre etapas)
========================================================= */

/* =========================================================
   FUNDAÇÃO MOBILE (M1)
   Tokens novos e aditivos — nenhum token existente acima é
   redefinido, então nada muda visualmente até que um componente
   passe a consumi-los (M2–M8).
========================================================= */

:root {
  /* ESCALA TIPOGRÁFICA MOBILE — ainda não consumida por nenhum
     componente. Extraída/refinada a partir dos valores já usados
     ad-hoc em css-mobile/hero-mobile.css (o exemplo mais completo
     hoje). --text-h1 etc. continuam intactos e em uso no desktop. */
  --text-mobile-display: clamp(1.9rem, 1.6rem + 2.2vw, 2.2rem);
  --text-mobile-h1: clamp(1.7rem, 1.45rem + 1.8vw, 1.95rem);
  --text-mobile-h2: clamp(1.2rem, 1.05rem + 1.2vw, 1.35rem);
  --text-mobile-h3: clamp(1.02rem, 0.96rem + 0.5vw, 1.1rem);
  --text-mobile-body: clamp(0.88rem, 0.84rem + 0.4vw, 0.95rem);
  --text-mobile-body-sm: clamp(0.82rem, 0.79rem + 0.3vw, 0.87rem);
  --text-mobile-label: clamp(0.64rem, 0.62rem + 0.2vw, 0.7rem);

  /* ESPAÇAMENTO VERTICAL MOBILE — aliases semânticos sobre a
     escala --space-* já existente (não valores novos), para dar
     vocabulário consistente a M2–M8 em vez de cada seção escolher
     --space-xl vs --space-2xl livremente. */
  --space-mobile-section-y: var(--space-xl);
  --space-mobile-header-gap: var(--space-2xs);
  --space-mobile-block-gap: var(--space-lg);
  --space-mobile-cta-gap: var(--space-sm);

  /* TOUCH TARGET — área mínima confortável de toque (não é o
     tamanho visual do ícone/elemento; a área interativa pode ser
     maior que ele). */
  --touch-target-min: 44px;

  /* SAFE AREA — fallback 0px garante que, sem viewport-fit=cover
     ou em navegador sem suporte, o valor não soma nada
     (comportamento idêntico ao atual). Só tem efeito real em
     dispositivos com notch/home indicator. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* =========================================================
   CONTAINER — utilitário opt-in para as próximas etapas
========================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* =========================================================
   FOCUS-VISIBLE — padrão global de foco
========================================================= */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =========================================================
   PREFERS-REDUCED-MOTION
   Usuários com redução de movimento não recebem animações/
   transições longas. O feedback de estado continua existindo,
   apenas sem a animação.
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}