/*
 * Zevora — design tokens
 *
 * Identidade visual provisória e neutra. Para aplicar a marca definitiva,
 * altere apenas este arquivo: cores, tipografia, raios e sombras.
 * Os estilos em styles.css consomem somente estas variáveis.
 */

:root {
  /* Tipografia */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 4vw, 2.5rem);
  --text-4xl: clamp(2.375rem, 5.5vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* Cores — escala neutra */
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f6f5;
  --color-bg-muted: #eeeeec;
  --color-surface: #ffffff;
  --color-border: #e3e3e0;
  --color-border-strong: #cfcfcb;

  --color-text: #18181b;
  --color-text-muted: #5a5a60;
  --color-text-subtle: #85858b;

  /* Cor de destaque (substituir pela cor da marca) */
  --color-accent: #27272a;
  --color-accent-hover: #000000;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #ececea;

  /* Cores do mockup de mapa */
  --map-land: #efefec;
  --map-block: #e2e2de;
  --map-road: #ffffff;
  --map-water: #dcdfe2;
  --map-point: #3f3f46;
  --map-highlight: #18181b;

  /* Forma */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 24px 48px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.04);

  /* Layout */
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 10vw, 112px);
}