/*
  Tokens de design — BigWho Sistemas
  Fonte: Docs/07-identidade.md. Toda cor, fonte, espaço, raio e duração vem daqui.

  Pontos de quebra (media queries não aceitam variáveis; usar estes valores):
    sm: 40rem  (640px)
    md: 60rem  (960px)
    lg: 80rem  (1280px)
*/

:root {
  /* Cores */
  --color-blue: #487cb4;
  --color-blue-deep: #2d5b8e;
  --color-blue-deep-hover: #234a75;
  --color-graphite: #2f3337;
  --color-gray: #575858;
  --color-concrete: #f1f2f0;
  --color-line: #d8dcdf;
  --color-grid: #e3e6e8;
  --color-night: #17222d;
  --color-night-line: #2c3a47;
  --color-night-text: #c9d1d9;
  --color-yellow: #e6b01e;
  --color-white: #ffffff;
  --color-error: #a4262c;
  --color-focus: var(--color-blue-deep);

  /* Tipografia */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Saira", var(--font-sans);
  --width-display: 112.5%;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-hero: clamp(2.5rem, 1.7rem + 2.6vw, 3.5rem);
  --fs-page-title: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;

  --lh-tight: 1.06;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;

  /* Espaçamento (base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container: 80rem;
  --gutter: 1.25rem;
  --section-space: var(--space-16);
  --header-height: 4rem;
  --measure: 62ch;

  /* Forma */
  --radius-sm: 4px;
  --radius-md: 8px;
  --border-width: 1px;
  --rule-width: 2px;

  /* Movimento */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-route: 2400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Camadas */
  --z-header: 100;
  --z-skip: 200;
}

@media (min-width: 60rem) {
  :root {
    --gutter: 2rem;
    --section-space: var(--space-24);
    --header-height: 5.5rem;
  }
}