/* ============================================================
   DESIGN TOKENS — Grupo Modão
   Fonte única da verdade para cor, tipografia, espaçamento,
   sombra, easing e breakpoints. Tudo no site deriva daqui.
   ============================================================ */

:root {
  /* ---------- Cor: base ---------- */
  --color-black-deep: #0B0B0B;   /* preto profundo — fundo principal */
  --color-black-matte: #111111;  /* preto fosco — seções alternadas */
  --color-black-raised: #1B1B1B; /* superfícies elevadas: cards, navbar sólida */
  --color-wood-dark: #241a10;    /* madeira escura — acentos sutis, bordas */

  /* ---------- Cor: dourado ---------- */
  --color-gold: #D8A643;         /* dourado metálico — base da marca */
  --color-gold-light: #F4D37A;   /* brilho suave — hover, destaque, glow */
  --color-gold-dim: #8a6a2c;     /* dourado escurecido — bordas discretas */

  /* ---------- Cor: texto ---------- */
  --color-white: #FFFFFF;
  --color-white-soft: rgba(255, 255, 255, 0.82);
  --color-white-muted: rgba(255, 255, 255, 0.56);
  --color-white-faint: rgba(255, 255, 255, 0.12);

  /* ---------- Gradientes ---------- */
  --gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  --gradient-stage: radial-gradient(ellipse at 50% 30%, rgba(216, 166, 67, 0.16) 0%, rgba(11, 11, 11, 0) 65%);
  --gradient-fade-bottom: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, var(--color-black-deep) 100%);
  --gradient-surface: linear-gradient(160deg, var(--color-black-raised) 0%, var(--color-black-matte) 100%);

  /* ---------- Tipografia ---------- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --fs-hero: clamp(3rem, 2.2rem + 4vw, 6.5rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.18em;

  /* ---------- Espaçamento (escala base 8px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 4vw, 4rem);

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-nav: 100;
  --z-cookie-banner: 150;
  --z-overlay: 200;
  --z-preloader: 300;

  /* ---------- Sombra e brilho ---------- */
  --shadow-stage: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-nav: 0 8px 24px rgba(0, 0, 0, 0.4);
  --glow-gold-soft: 0 0 24px rgba(216, 166, 67, 0.28);
  --glow-gold-strong: 0 0 40px rgba(244, 211, 122, 0.45);

  /* ---------- Glass effect ---------- */
  --glass-bg: rgba(17, 17, 17, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);

  /* ---------- Easing / duração ---------- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;
  --duration-cinematic: 1.4s;

  /* ---------- Bordas ---------- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

/* ---------- Breakpoints (referência — usados via @media diretamente) ----------
   mobile:    até 599px
   tablet:    600px – 899px
   notebook:  900px – 1279px
   desktop:   1280px+
------------------------------------------------------------------------- */