/* =============================================================
 * Millenierds — v0.1.0
 * Estilos da página institucional inicial.
 *
 * Organização:
 *   1. Design tokens (custom properties em :root)
 *   2. Reset mínimo
 *   3. Layout base (body como container de centralização)
 *   4. Componente .brand
 *   5. Preferências do usuário (reduced motion)
 * ============================================================= */

/* 1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* Cores da marca */
  --color-bg: #000000;
  --color-fg: #ffffff;
  --color-accent: #e22f1a;     /* vermelho da marca — reservado para uso futuro */

  /* Tipografia (apenas system fonts — zero requisições externas) */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  --font-size-tagline: clamp(0.875rem, 0.65rem + 0.9vw, 1.125rem);
  --font-weight-tagline: 500;
  --letter-spacing-tagline: 0.22em;
  --line-height-tagline: 1.6;

  /* Dimensões — logo inclui o wordmark, então precisa ser maior */
  --logo-size: clamp(200px, 50vw, 400px);
  --stack-gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  --page-padding: clamp(1rem, 1rem + 1vw, 2rem);
}

/* 2. Reset mínimo
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3. Layout base
   O body é o container de centralização.
   100dvh trata corretamente a barra dinâmica em mobile;
   100vh permanece como fallback para navegadores antigos.
   ------------------------------------------------------------- */
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-padding);

  background-color: var(--color-bg);
  color: var(--color-fg);

  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4. Componente .brand
   Empilha logotipo e tagline ao centro, com gap fluido.
   ------------------------------------------------------------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
  text-align: center;
  max-width: min(100%, 60ch);
}

.brand__heading {
  /* O <h1> é o container semântico do logotipo; sem peso visual próprio. */
  font-size: 0;
  line-height: 0;
  margin: 0;
}

.brand__logo {
  width: var(--logo-size);
  height: auto;
  /* Aspect ratio explícito previne CLS antes do load. */
  aspect-ratio: 1 / 1;
}

.brand__tagline {
  font-size: var(--font-size-tagline);
  font-weight: var(--font-weight-tagline);
  letter-spacing: var(--letter-spacing-tagline);
  line-height: var(--line-height-tagline);
  text-transform: uppercase;
  color: var(--color-fg);

  /* Garante que o texto não sangre lateralmente em viewports pequenos */
  max-width: 32ch;
}

/* 5. Preferências do usuário — acessibilidade
   Respeita a configuração do sistema para movimento reduzido.
   ------------------------------------------------------------- */
@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;
  }
}