/* tokens de design da Ellos — cores, tipografia, espaçamento, essas coisas.
   copiei tudo direto do Manual de Marca que a cliente mandou, sem arredondar
   nada nos hex */

:root {
  /* cores oficiais (manual, seção 3) */
  --color-navy-950: #00113D;   /* a cor primária da marca */
  --color-gold-light: #F9E3B2; /* champagne */
  --color-gold: #AD8E44;       /* dourado secundário */

  /* variações de navy só pra dar profundidade nas superfícies escuras,
     não existem no manual, inventei essas aqui */
  --color-navy-900: #061B4C;
  --color-navy-800: #0D2760;
  --color-navy-700: #17356F;
  --color-navy-600: #24467F;

  /* variações de dourado */
  --color-gold-dark: #83682F; /* o dourado normal não fecha AA no fundo claro (fica em uns 2.8:1), por isso esse mais escuro */
  --color-gold-soft: rgba(173, 142, 68, 0.35);
  --color-gold-wash: rgba(173, 142, 68, 0.07);

  /* neutros das seções claras: só branco e o champagne oficial aqui.
     não vou inventar bege ou cinza que não existe na paleta do manual */
  --color-paper: #FFFFFF;
  --color-paper-deep: var(--color-gold-light);
  --color-ink: var(--color-navy-950);
  --color-slate: rgba(0, 17, 61, 0.72); /* isso aqui é navy com opacidade, não um cinza à parte */

  /* neutros pro fundo escuro */
  --color-white: #FFFFFF;
  --color-fog: rgba(255, 255, 255, 0.78);
  --color-fog-dim: rgba(255, 255, 255, 0.46);
  --color-hairline-dark: rgba(249, 227, 178, 0.14);
  --color-hairline-light: rgba(0, 17, 61, 0.12);

  /* tipografia: Montserrat mesmo, é o que tá no manual (seção 2) */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --text-display-xl: clamp(3.25rem, 2.1rem + 5vw, 8rem);
  --text-display-l: clamp(2.5rem, 1.7rem + 4vw, 6rem);
  --text-display-m: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  --text-heading-l: clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem);
  --text-heading-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --text-body-l: clamp(0.9375rem, 0.88rem + 0.28vw, 1.1875rem);
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-micro: 0.75rem;

  --tracking-tightest: -0.045em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.18em;
  --tracking-widest: 0.32em;

  --leading-tight: 0.98;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* espaçamento, base 8px, deixei bem generoso de propósito */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;

  /* layout geral */
  --container-max: 1520px;
  --container-padding: clamp(1.5rem, 6vw, 6.5rem);
  --col-gap: clamp(1rem, 2.4vw, 2.5rem);

  /* raios de borda */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 24px;
  --radius-xl: 40px;
  --radius-full: 999px;

  /* efeito de vidro (glassmorphism), usado com moderação */
  --glass-bg-dark: rgba(15, 27, 66, 0.38);
  --glass-bg-darker: rgba(2, 9, 31, 0.88);
  --glass-bg-light: rgba(255, 255, 255, 0.6);
  --glass-border-dark: rgba(249, 227, 178, 0.16);
  --glass-border-light: rgba(0, 17, 61, 0.1);
  --glass-blur: 14px;
  --glass-shadow: 0 30px 80px -30px rgba(0, 6, 24, 0.65);
  --glass-shadow-soft: 0 12px 40px -18px rgba(0, 17, 61, 0.35);

  /* curvas de easing, tipo Apple/Linear */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* durações */
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --dur-slower: 1.4s;

  /* camadas (z-index) */
  --z-base: 1;
  --z-grid: 2;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 200;
}