/* W Tech Informática — Foundations
 * Six-color palette + typography tokens.
 * Use these vars exclusively. Derive states (hover, focus) from this palette only.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Palette (the only six allowed) ────────────────────────────────── */
  --wt-white:        #FFFFFF;  /* pure white */
  --wt-paper:        #FDFDFF;  /* primary bg / text on dark */
  --wt-paper-alt:    #EFECF9;  /* alt bg, never two adjacent */
  --wt-mute:         #5B4D88;  /* secondary text, captions, divider, icons */
  --wt-ink-soft:     #0D1E69;  /* subtitles, body, "soft black" */
  --wt-ink:          #060E33;  /* primary headings, dark bg */
  --wt-accent:       #5271FF;  /* CTA / interactive accent (≤5% area) */

  /* ── Semantic tokens ─────────────────────────────────────────────── */
  --bg:              var(--wt-paper);
  --bg-alt:          var(--wt-paper-alt);
  --bg-dark:         var(--wt-ink);
  --fg:              var(--wt-ink);
  --fg-soft:         var(--wt-ink-soft);
  --fg-mute:         var(--wt-mute);
  --fg-on-dark:      var(--wt-paper);
  --accent:          var(--wt-accent);
  --border-subtle:   var(--wt-paper-alt);
  --border-strong:   var(--wt-ink);

  /* Hover states are overlays — never new colors.
   * Apply `box-shadow: inset 0 0 0 999px rgba(6,14,51,.08)` or
   * `filter: brightness(0.92)` on accent. */
  --overlay-darken-hover: rgba(6, 14, 51, 0.08);
  --overlay-darken-press: rgba(6, 14, 51, 0.14);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (desktop) */
  --fs-h1: 38px;       --lh-h1: 1.1;   --tracking-h1: -0.02em;
  --fs-h2: 36px;       --lh-h2: 1.15;  --tracking-h2: -0.015em;
  --fs-h3: 22px;       --lh-h3: 1.3;   --tracking-h3: -0.005em;
  --fs-body: 17px;     --lh-body: 1.6;
  --fs-caption: 14px;  --lh-caption: 1.5;
  --fs-button: 16px;   --tracking-button: 0.01em;
  --fs-eyebrow: 13px;  --tracking-eyebrow: 0.08em;

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

  /* ── Spacing (multiples of 8) ────────────────────────────────────── */
  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8: 128px;

  /* Section rhythm */
  --section-gap-y:   96px;
  --section-inner-y: 48px;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --container-max:   1200px;
  --gutter:          24px;
  --grid-cols:       12;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 8px;     /* buttons, inputs */
  --r-lg: 12px;    /* cards, images, video, map */
  --r-pill: 999px;

  /* ── Elevation (used VERY sparingly) ─────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(6, 14, 51, 0.04);
  --shadow-none: none;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   150ms;
  --dur-slow:   300ms;
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 30px;
    --section-gap-y: 64px;
    --section-inner-y: 32px;
    --container-max: 100%;
    --gutter: 20px;
  }
}

/* ── Base resets ──────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type recipes ─────────────────────────────────────────────────── */
.wt-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: var(--w-bold);
  color: var(--fg);
  margin: 0;
}

.wt-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--w-bold);
  color: var(--fg);
  margin: 0;
}

.wt-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  font-weight: var(--w-semibold);
  color: var(--fg-soft);
  margin: 0;
}

.wt-body, p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  color: var(--fg-soft);
  margin: 0;
}

.wt-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-mute);
}

.wt-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-mute);
  text-transform: none;
  font-weight: var(--w-regular);
}

.wt-section-num {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--fg-mute);
  font-weight: var(--w-regular);
}

/* ── Components ───────────────────────────────────────────────────── */
.wt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-button);
  padding: 16px 32px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  line-height: 1;
}

.wt-btn--primary {
  background: var(--accent);
  color: var(--fg-on-dark);
}
.wt-btn--primary:hover { filter: brightness(0.92); }
.wt-btn--primary:active { filter: brightness(0.84); }

.wt-btn--secondary {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--fg);
}
.wt-btn--secondary:hover {
  box-shadow: inset 0 0 0 999px var(--overlay-darken-hover);
}

.wt-card {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}

.wt-card--on-paper { background: var(--bg-alt); box-shadow: none; }

.wt-divider {
  border: 0;
  border-top: 1px solid var(--bg-alt);
}

.wt-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}