/* ---------------------------------------------------------
   BASE — reset, tokens, tipografia geral
   --------------------------------------------------------- */

:root {
  /* Cores oficiais Grupo FAJ */
  --faj-navy:        #041942;
  --faj-navy-deep:   #020C2A;
  --faj-navy-soft:   #0F2E6B;
  --faj-navy-glow:   #1E4585;

  /* Accent — azul elétrico (substitui o laranja anterior) */
  --faj-orange:      #81b6ff;
  --faj-orange-soft: #81b6ff;
  --faj-yellow:      #ECC625;
  --faj-green:       #289B38;
  --faj-red:         #C73629;

  --faj-white:       #FFFFFF;
  --faj-bone:        #F4F5F7;
  --faj-light-gray:  #D4DCE1;
  --faj-mid-gray:    #979899;
  --faj-dark-gray:   #2A2C34;
  --faj-ink:         #0F1128;

  /* Tokens semânticos */
  --bg:              var(--faj-navy);
  --bg-alt:          var(--faj-navy-deep);
  --bg-light:        var(--faj-bone);
  --text:            var(--faj-white);
  --text-muted:      rgba(255,255,255,.62);
  --text-invert:     var(--faj-navy);
  --accent:          var(--faj-orange);
  --accent-hover:    var(--faj-orange-soft);
  --line:            rgba(255,255,255,.18);
  --line-dark:       rgba(15,17,40,.14);

  /* Espaçamento e ritmo */
  --gutter:          clamp(24px, 4vw, 72px);
  --panel-pad-y:     clamp(48px, 8vh, 120px);
  --panel-pad-x:     clamp(32px, 6vw, 140px);

  /* Escalas tipográficas fluidas */
  --fs-caption:      clamp(11px, 0.72vw, 13px);
  --fs-body:         clamp(15px, 1.02vw, 18px);
  --fs-lede:         clamp(18px, 1.35vw, 24px);
  --fs-h4:           clamp(20px, 1.8vw, 32px);
  --fs-h3:           clamp(28px, 2.6vw, 48px);
  --fs-h2:           clamp(40px, 4.4vw, 84px);
  --fs-h1:           clamp(56px, 7.2vw, 132px);
  --fs-mega:         clamp(96px, 14vw, 240px);
  --fs-ultra:        clamp(120px, 22vw, 360px);

  /* Motion */
  --ease-out:        cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:     cubic-bezier(.65, 0, .35, 1);
  --dur-fast:        .4s;
  --dur-med:         .7s;
  --dur-slow:        1.1s;

  /* Layout */
  --nav-h:           64px;
  --footer-h:        56px;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Just Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: relative;
}

/* Motion accessibility: desliga snap smoothing quando reduzido */
@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--faj-orange);
  color: var(--faj-white);
}

/* Skip link acessibilidade */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  padding: 10px 18px;
  background: var(--faj-white);
  color: var(--faj-navy);
  font-weight: 600;
  z-index: 9999;
  border-radius: 4px;
}
.skip-link:focus { top: 12px; }

/* Estados focus visíveis mas discretos */
:focus-visible {
  outline: 2px solid var(--faj-orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Utilitários tipográficos */
.eyebrow {
  font-family: 'Just Sans', sans-serif;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--dark { color: var(--faj-navy); opacity: .6; }

.chapter-num {
  font-family: 'Just Sans', sans-serif;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.5em;
  color: var(--accent);
}

.headline {
  font-family: 'Just Sans', sans-serif;
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.headline strong,
.headline b {
  font-weight: 700;
}

.lede {
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text);
  max-width: 42ch;
}

.body-copy {
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  max-width: 55ch;
}
.body-copy--light { color: var(--text-muted); }

/* Regra de destaque tipo tag pill (do PDF: "inovação", "contrante evolução") */
.pill {
  display: inline-block;
  padding: 0.15em 0.8em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 500;
  color: var(--accent);
}

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