/* GERADO POR tokens/build-tokens.mjs — NÃO EDITAR À MÃO.
   Fonte: tokens/varal.tokens.json */

:root {

  /* color */
  --color-paper: #FFF8F0;
  --color-wall: #F3E7D7;
  --color-ink: #1A1A1A;
  --color-brand: #E8197A;
  --color-cobalt: #1F4FD1;
  --color-highlight: #F5A623;

  /* font */
  --font-display: Fraunces, Georgia, serif;
  --font-body: Fraunces, Georgia, serif;
  --font-tag: Fraunces, Georgia, serif;

  /* weight */
  --weight-regular: 400;
  --weight-strong: 600;

  /* size */
  --size-small: 0.8125rem;
  --size-body: 1.0625rem;
  --size-lead: 1.375rem;
  --size-title: 1.75rem;
  --size-section: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --size-page: clamp(3rem, 1.4rem + 6vw, 7rem);
  --size-display: clamp(3.5rem, 1rem + 6vw, 8rem);
  --size-masthead: clamp(4.5rem, 23vw, 21rem);

  /* leading */
  --leading-tight: 0.92;
  --leading-body: 1.6;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-gutter: round(clamp(20px, 5vw, 72px), 4px);
  --space-section: round(clamp(96px, 14vw, 224px), 4px);

  /* radius */
  --radius-paper: 2px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-paper: 0 1px 1px rgb(60 40 20 / 0.10), 0 6px 12px rgb(60 40 20 / 0.10), 0 24px 48px rgb(60 40 20 / 0.14);
  --shadow-lift: 0 2px 2px rgb(60 40 20 / 0.10), 0 12px 24px rgb(60 40 20 / 0.14), 0 40px 80px rgb(60 40 20 / 0.20);

  /* motion */
  --motion-duration-fast: 200ms;
  --motion-duration-base: 600ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* layout */
  --layout-measure: 62ch;
  --layout-max: 1360px;
}

@media (max-width: 600px) {
  :root {
    --size-display: clamp(3rem, 1rem + 9vw, 3.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-base: 1ms;
  }
}