/* styles/global.css - importa módulos e define variáveis de escala seguras */
@import url('./background.css');
@import url('./header.css');
@import url('./main.css');
@import url('./social.css');
@import url('./modal.css');

/* Cores (originais) e escala segura por variáveis */
:root{
  --text: #EDF1F7;
  --orange: #ff6600;
  --blue: #0089fd;

  --scale: 1; /* padrão */
  --logo-size-base: 72px;
  --gap-base: 24px;
  --hero-icon-base: 320px;
  --hero-char-base: 700px;
  --cta-font-base: 16px;
  --cta-pad-vert-base: 12px;
  --cta-pad-horz-base: 16px;
  --social-size-base: 56px;
  --container-padding-base: 24px;
  --max-width: 1440px;

  --logo-size: calc(var(--logo-size-base) * var(--scale));
  --gap: calc(var(--gap-base) * var(--scale));
  --hero-icon-max: calc(var(--hero-icon-base) * var(--scale));
  --hero-char-max: calc(var(--hero-char-base) * var(--scale));
  --cta-font: calc(var(--cta-font-base) * var(--scale));
  --cta-padding-vertical: calc(var(--cta-pad-vert-base) * var(--scale));
  --cta-padding-horizontal: calc(var(--cta-pad-horz-base) * var(--scale));
  --social-size: calc(var(--social-size-base) * var(--scale));
  --container-padding: calc(var(--container-padding-base) * var(--scale));
}

/* Aumenta escala em telas largas (seguro: altera apenas variáveis) */
@media (min-width: 1200px) {
  :root { --scale: 1.3; } /* +30% */
}

/* reset e base */
* { box-sizing: border-box; margin:0; padding:0; }
html { font-family: "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, Arial; font-size: 16px; }
body {
  background: #000;
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.4;
}

/* container util */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* wrapper */
.site { min-height: 100vh; display:flex; flex-direction:column; align-items:center; }

/* accessibility */
a:focus, button:focus { outline: 3px solid rgba(255,255,255,0.08); outline-offset: 3px; border-radius: 6px; }

/* scroll lock when modal open */
body.modal-open { overflow: hidden; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

a, a:visited {
  font-style: normal;
}
#app {
  overflow: hidden;
}