:root {
  color-scheme: light;

  --color-ink: #0b1630;
  --color-background: #f3f6fb;
  --color-surface: #ffffff;
  --color-muted: #51607a;
  --color-accent: #1f4fe0;
  --color-accent-light: #8fb0ff;
  --color-border: #dfe5f0;
  --color-whatsapp: #25d366;

  --color-on-dark-strong: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --color-on-dark: color-mix(in srgb, var(--color-surface) 80%, transparent);
  --color-on-dark-muted: color-mix(in srgb, var(--color-surface) 72%, transparent);
  --color-on-dark-faint: color-mix(in srgb, var(--color-surface) 55%, transparent);
  --color-on-dark-border: color-mix(in srgb, var(--color-surface) 16%, transparent);
  --color-on-dark-fill: color-mix(in srgb, var(--color-surface) 6%, transparent);
  --color-on-accent-fill: color-mix(in srgb, var(--color-surface) 10%, transparent);
  --color-on-accent-border: color-mix(in srgb, var(--color-surface) 25%, transparent);
  --color-grid-line: color-mix(in srgb, var(--color-surface) 5%, transparent);
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 9%, transparent);
  --color-accent-ring: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-line: color-mix(in srgb, var(--color-accent) 25%, transparent);
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 50%, transparent);
  --color-accent-light-tint: color-mix(in srgb, var(--color-accent-light) 15%, transparent);
  --color-whatsapp-glow: color-mix(in srgb, var(--color-whatsapp) 60%, transparent);

  --border-card: 1px solid var(--color-border);
  --border-on-dark: 1px solid var(--color-on-dark-border);

  --pattern-grid:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  --pattern-grid-size: 40px 40px;

  --shadow-card:
    0 1px 2px color-mix(in srgb, var(--color-ink) 6%, transparent),
    0 12px 32px -12px color-mix(in srgb, var(--color-ink) 18%, transparent);
  --shadow-floating: 0 10px 28px -8px color-mix(in srgb, var(--color-ink) 45%, transparent);
  --shadow-whatsapp: 0 10px 28px -10px color-mix(in srgb, var(--color-whatsapp) 70%, transparent);
  --shadow-raised: 0 14px 32px -12px rgb(0 0 0 / 0.5);
  --shadow-device: 0 30px 60px -20px rgb(0 0 0 / 0.55);

  --font-family-base: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --font-size-caption: 0.75rem;
  --font-size-label: 0.8125rem;
  --font-size-small: 0.875rem;
  --font-size-body: 1.0625rem;
  --font-size-body-large: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --font-size-subtitle: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --font-size-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-heading: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --font-size-display: clamp(2rem, 1.3rem + 2.9vw, 3.25rem);

  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-none: 1;
  --line-height-display: 1.06;
  --line-height-tight: 1.1;
  --line-height-title: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-base: 1.65;
  --line-height-relaxed: 1.75;

  --letter-spacing-display: -0.03em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-heading: 0.01em;
  --letter-spacing-caps: 0.06em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --space-card: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  --gutter: max(1rem, 4vw);

  --content-width: 70rem;
  --measure: 65ch;
  --size-touch-target: 3.5rem;
  --size-floating-button: 3.75rem;
  --size-badge: 2.5rem;
  --size-icon-sm: 1.25rem;
  --size-icon-md: 1.375rem;
  --size-icon-lg: 1.75rem;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --focus-ring-width: 3px;
  --focus-ring-offset: 4px;

  --layer-floating: 20;
  --layer-skip-link: 30;

  --duration-fast: 180ms;
  --duration-medium: 240ms;
  --duration-slow: 700ms;
  --duration-pulse: 2.4s;
  --duration-spin: 90s;
  --easing-standard: ease;
  --easing-decelerate: ease-out;
  --easing-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-lift: -2px;
  --motion-grow: 1.06;
  --motion-shrink: 0.9;
  --motion-drop: var(--space-4);

  --icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z'/%3E%3Cpath d='M8.8 8.6c.2-.5.6-.6.9-.6h.5l.9 2.1-.7.9a6 6 0 0 0 2.7 2.7l.9-.7 2.1.9v.5c0 .3-.1.7-.6.9-.6.3-1.6.4-3-.2a8.6 8.6 0 0 1-3.6-3.6c-.6-1.4-.5-2.4-.1-2.9z' fill='black' stroke='none'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

h1,
h2 {
  font-weight: var(--font-weight-extrabold);
}

h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

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

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

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

:where(a, summary):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color, var(--color-accent));
  outline-offset: var(--focus-offset, var(--focus-ring-offset));
  border-radius: var(--focus-radius, var(--radius-xs));
}