/* ==========================================================================
   Base: design tokens, reset, typography, focus
   ========================================================================== */

:root {
  /* Colors */
  --color-bg: #f5f7fa;
  --color-white: #ffffff;
  --color-ink: #0d1321;
  --color-ink-hover: #26304a;
  --color-muted: #4b576b;
  --color-blue: #2f86f0;
  --color-blue-text: #1b5fc2;
  --color-sky-300: #b7d6f6;
  --color-sky-100: #e3eefb;
  --color-border: #e3e8f0;
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1fb858;

  /* Radius */
  --radius-lg: 28px;
  --radius-md: 20px;

  /* Spacing */
  --page-gutter: clamp(20px, 4vw, 64px);
  --section-gap: clamp(64px, 7vw, 112px);

  /* Typography */
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

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

:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}