/* ===========================================================
   Gerald Winkovitsch — Design Tokens
   Source of truth for all colors, type, spacing, motion.
   =========================================================== */

:root {
  /* ---- Colors: Base ---- */
  --gw-paper: #FAF6EE;
  --gw-paper-dim: #F4ECDB;
  --gw-card-bg: #ECE6D8;
  --gw-muted: #8A7A6C;
  --gw-line: #2A2421;
  --gw-ink: #161412;

  /* ---- Colors: Accent ---- */
  --gw-red: #ED4F3A;
  --gw-red-dark: #C44A1E;
  --gw-orange: #FF8A3D;

  /* ---- Colors: Page (Sub-page banners) ---- */
  --gw-page-red: #ED4F3A;
  --gw-page-violet: #6B5FD6;
  --gw-page-orange: #FF8A3D;
  --gw-page-green: #3D8A5A;
  --gw-page-sand: #C4A577;
  --gw-page-dark: #161412;

  /* ---- Typography ---- */
  --gw-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gw-serif: "Times New Roman", Times, Georgia, serif;
  --gw-mono: "JetBrains Mono", "Courier New", monospace;

  /* ---- Type Scale (fluid via clamp) ---- */
  --gw-display: clamp(48px, 8vw, 96px);
  --gw-h2: clamp(32px, 5vw, 48px);
  --gw-h3: 28px;
  --gw-h4: 22px;
  --gw-body-serif: 20px;
  --gw-body: 16px;
  --gw-mono-meta: 12px;
  --gw-mono-pill: 10px;

  /* ---- Spacing (8px grid) ---- */
  --gw-space-xs: 8px;
  --gw-space-sm: 16px;
  --gw-space-md: 24px;
  --gw-space-lg: 32px;
  --gw-space-xl: 48px;
  --gw-space-2xl: 64px;
  --gw-space-3xl: 96px;

  /* ---- Borders & Radii ---- */
  --gw-radius-sm: 6px;
  --gw-radius-md: 10px;
  --gw-radius-lg: 14px;
  --gw-radius-pill: 99px;
  --gw-border: 1px solid rgba(22, 20, 18, 0.08);
  --gw-border-strong: 1.5px solid var(--gw-ink);

  /* ---- Motion ---- */
  --gw-transition-fast: 0.18s ease;
  --gw-transition: 0.22s ease;
  --gw-transition-slow: 0.25s ease;

  /* ---- Z-Index Layers ---- */
  --gw-z-sticky: 50;
  --gw-z-modal: 100;
  --gw-z-whatsapp: 150;

  /* ---- Layout ---- */
  --gw-max-width: 1440px;
  --gw-container-padding: var(--gw-space-lg);
}

@media (max-width: 1024px) {
  :root { --gw-container-padding: var(--gw-space-md); }
}
@media (max-width: 640px) {
  :root { --gw-container-padding: var(--gw-space-sm); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}