:root {
  /* Brand colors — MRZN Brand Kit v1.2 */
  --marzano-graphite: #0F172A;
  --marzano-blue: #2563EB;
  --marzano-light: #F8FAFC;
  --marzano-border: #E2E8F0;
  --marzano-slate: #64748B;
  --marzano-white: #FFFFFF;

  /* Derived tones (interface use only, never brand identity) */
  --marzano-graphite-70: rgba(15, 23, 42, 0.7);
  --marzano-graphite-60: rgba(15, 23, 42, 0.6);
  --marzano-graphite-10: rgba(15, 23, 42, 0.06);
  --marzano-blue-10: rgba(37, 99, 235, 0.08);
  --marzano-blue-dark: #1D4ED8;

  /* Interface */
  --marzano-radius-sm: 8px;
  --marzano-radius-md: 16px;
  --marzano-radius-lg: 50px;
  --marzano-shadow: 0 8px 30px rgba(15, 23, 42, .08);

  /* Brand usage ratios (documentation only) */
  --marzano-white-ratio: 60%;
  --marzano-graphite-ratio: 30%;
  --marzano-blue-ratio: 10%;

  /* Typography */
  --font-body: "Inter", Arial, sans-serif;
  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.375rem;
  --fs-500: 1.75rem;
  --fs-600: 2.25rem;
  --fs-700: 3rem;
  --fs-800: 3.75rem;
  /* Números/títulos monumentais — usados com moderação nos elementos gráficos */
  --fs-display: clamp(4rem, 4rem + 6vw, 9rem);
  --fs-giant: clamp(3rem, 3rem + 4vw, 6rem);
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Spacing scale (reduzida ~25% em relação à v1 — menos altura, mesmo ritmo) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.75rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 7rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 1.5rem;
  --grid-gap: 1.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-normal: 420ms;
  --dur-slow: 700ms;
}

@media (min-width: 900px) {
  :root {
    --gutter: 2.5rem;
    --grid-gap: 1.5rem;
  }
}