/* ============================================================
   Gloria Marra — global.css
   Single source of truth for variables, resets, typography,
   and elegant digital editorial styling.
   ============================================================ */

:root {
  /* GLORIA (Marca Central) */
  --color-roxo-fenix: #7B4B8F;
  --color-bordo-profundo: #7A1E2C;
  --color-rosa-queimado: #C14F7A;
  --color-off-white: #F3EFEA;
  --color-preto-editorial: #1B1B1B;

  /* FRANCE EXPERIENCE */
  --color-greige-parisiense: #D8D1C7;
  --color-creme-claro: #F5F1EB;
  --color-roxo-assinatura: #8E6AA8;
  --color-bordo-discreto: #8A3B4A;

  /* PARIS DE MULHERES */
  --color-ameixa-escura: #5A2E63;

  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-off-white);
  color: var(--color-preto-editorial);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Base Link Reset - Completely eliminates default underline or color-shift on hover without destroying button borders */
a, 
a:hover, 
a:focus, 
a:active {
  color: inherit;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- Editorial Typography ---------- */
h1, h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-preto-editorial);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
}

h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-preto-editorial);
}

p, li, dd, dt, label, input, textarea, select, blockquote {
  font-family: var(--font-body);
}

/* ---------- Global Layout Utilities ---------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 2rem;
}