/* =========================================================================
   FKweb — Base / Reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--fk-bg);
  color: var(--fk-text);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-text-md);
  line-height: var(--fk-leading-normal);
  font-weight: var(--fk-weight-regular);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
  color: var(--fk-text-brand);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .18em;
  transition: color var(--fk-duration-fast) var(--fk-ease);
}
a:hover { color: var(--fk-accent); }

:focus-visible {
  outline: 2px solid var(--fk-accent);
  outline-offset: 2px;
  border-radius: var(--fk-radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--fk-border);
  margin: var(--fk-space-9) 0;
}

::selection { background: var(--fk-accent); color: var(--fk-accent-contrast); }

/* -------------------------------------------------------------------------
   Escala tipográfica — classes utilitárias equivalentes ao Atom
   ------------------------------------------------------------------------- */
.fk-h1, .fk-h2, .fk-h3, .fk-h4, .fk-h5 {
  font-family: var(--fk-font-brand);
  letter-spacing: var(--fk-tracking-title);
  line-height: var(--fk-leading-tight);
  color: var(--fk-text);
}
.fk-h1 { font-size: var(--fk-text-h1); font-weight: var(--fk-weight-bold); }
.fk-h2 { font-size: var(--fk-text-h2); font-weight: var(--fk-weight-bold); }
.fk-h3 { font-size: var(--fk-text-h3); font-weight: var(--fk-weight-semibold); line-height: var(--fk-leading-snug); }
.fk-h4 { font-size: var(--fk-text-h4); font-weight: var(--fk-weight-semibold); line-height: var(--fk-leading-snug); }
.fk-h5 { font-size: var(--fk-text-h5); font-weight: var(--fk-weight-medium);   line-height: var(--fk-leading-snug); }

.fk-p-lg { font-size: var(--fk-text-lg); line-height: var(--fk-leading-relaxed); }
.fk-p-md { font-size: var(--fk-text-md); line-height: var(--fk-leading-normal); }
.fk-p-sm { font-size: var(--fk-text-sm); line-height: var(--fk-leading-normal); }
.fk-p-xs { font-size: var(--fk-text-xs); line-height: var(--fk-leading-normal); }
.fk-bold { font-weight: var(--fk-weight-bold); }

.fk-muted  { color: var(--fk-text-muted); }
.fk-subtle { color: var(--fk-text-subtle); }

.fk-eyebrow {
  font-size: var(--fk-text-xs);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-accent);
}

.fk-mono {
  font-family: var(--fk-font-mono);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.fk-container {
  width: 100%;
  max-width: var(--fk-container);
  margin-inline: auto;
  padding-inline: var(--fk-space-7);
}
.fk-container--narrow { max-width: var(--fk-container-narrow); }

.fk-stack > * + * { margin-top: var(--fk-space-5); }
.fk-cluster { display: flex; flex-wrap: wrap; gap: var(--fk-space-4); align-items: center; }

.fk-grid { display: grid; gap: var(--fk-space-7); }
.fk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .fk-grid--3, .fk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fk-grid--2, .fk-grid--3, .fk-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .fk-h1 { font-size: 40px; }
  .fk-h2 { font-size: 32px; }
  .fk-h3 { font-size: 26px; }
}

.fk-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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