/* Viva Experience — tokens de design
   Direção: "luxo ao entardecer" — marinho profundo, dourado do logo, gradientes de pôr do sol. */
:root {
  /* Marca (do logo) */
  --brand-navy: #003262;
  --brand-gold: #d5c58a;

  /* Superfícies */
  --bg: #051026;
  --bg-2: #081733;
  --surface: #0c1f42;
  --surface-2: #11295a;
  --glass: rgba(8, 23, 51, .55);
  --line: rgba(213, 197, 138, .18);
  --line-strong: rgba(213, 197, 138, .4);

  /* Texto */
  --text: #f6f0e2;
  --muted: #b3b8c9;
  --gold: #d5c58a;
  --gold-bright: #ecdca2;
  --gold-ink: #051026;

  /* Pôr do sol */
  --sun-amber: #f4a640;
  --sun-coral: #e9765b;
  --sun-rose: #b85b7a;
  --sunset: linear-gradient(115deg, var(--sun-amber) 0%, var(--sun-coral) 45%, var(--sun-rose) 100%);
  --sky: radial-gradient(120% 80% at 70% 0%, rgba(244, 166, 64, .28) 0%, rgba(233, 118, 91, .16) 30%, rgba(5, 16, 38, 0) 65%);

  /* Estado */
  --live: #ff4d4d;
  --danger: #f0a08a;
  --ok: #9fd8b5;

  /* Tipografia */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--2: clamp(.72rem, .7rem + .1vw, .78rem);
  --step--1: clamp(.83rem, .8rem + .15vw, .9rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.8rem + 4vw, 5.5rem);
  --step-5:  clamp(3.2rem, 2rem + 6vw, 8rem);

  /* Espaços */
  --space-2xs: .375rem;
  --space-xs: clamp(.6rem, .5rem + .4vw, .9rem);
  --space-s: clamp(1rem, .8rem + 1vw, 1.5rem);
  --space-m: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-l: clamp(4rem, 3rem + 5vw, 9rem);

  --gutter: 16px;
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --container: 1240px;
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
}