/* ============================================================
   Érica Galhardo — Design Tokens
   Colors · Typography · Spacing · Radii · Shadows · Motion
   ============================================================ */

:root {
  /* ---------- Brand · Primary (gold) ---------- */
  --primary:        #C9A15F;
  --primary-hover:  #B88E4E;
  --primary-light:  #EADCC2;
  --primary-soft:   #F4EBDA; /* subtle wash for hover/focus backgrounds */

  /* ---------- Surfaces / Backgrounds ---------- */
  --bg-main:        #F5F1ED;
  --bg-soft:        #F2EBE5;
  --bg-alt:         #EDE6DF;
  --white:          #FFFFFF;
  --ink:            #4A3F38; /* used as overlay base */

  /* ---------- Text ---------- */
  --fg1:            #4A3F38; /* text primary   */
  --fg2:            #6B5B52; /* text secondary */
  --fg3:            #9C9087; /* text muted     */
  --fg-on-primary:  #FFFFFF;

  /* ---------- Borders ---------- */
  --border:         #E8DED6;
  --border-strong:  #D9CEC2;

  /* ---------- Semantic ---------- */
  --success:        #6B8E5A;
  --warning:        #C98A3A;
  --danger:         #B3574D;
  --info:           #6B7E8E;

  /* ---------- Typography · Families ---------- */
  --font-display:   'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-body:      'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Typography · Scale ---------- */
  --fs-h1:          56px;
  --fs-h2:          40px;
  --fs-h3:          28px;
  --fs-h4:          22px;
  --fs-lead:        18px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-micro:       12px;

  --lh-display:     1.1;
  --lh-heading:     1.2;
  --lh-body:        1.65;
  --lh-tight:       1.35;

  --tracking-body:   0;
  --tracking-eyebrow: 0.18em;
  --tracking-caps:    0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  80px;
  --s-10: 120px;

  /* ---------- Radii ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   14px; /* default button */
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:   0 2px 6px rgba(0,0,0,0.03);
  --shadow-soft:   0 4px 14px rgba(74,63,56,0.06);
  --shadow-raised: 0 12px 32px rgba(74,63,56,0.10);
  --shadow-focus:  0 0 0 3px rgba(201,161,95,0.30);

  /* ---------- Overlay (hero scrim) ---------- */
  --hero-overlay: linear-gradient(
    90deg,
    rgba(74,63,56,0.82) 0%,
    rgba(74,63,56,0.65) 35%,
    rgba(74,63,56,0.30) 65%,
    rgba(74,63,56,0)    100%
  );

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* ---------- Container ---------- */
  --container-max:   1200px;
  --container-pad:   24px;

  /* ---------- Component sizing ---------- */
  --logo-nav:     40px;
  --logo-footer:  48px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.eg-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  color: var(--fg1);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

.eg-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg1);
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}

.eg-h3, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg1);
  margin: 0;
}

.eg-h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--fg1);
  margin: 0;
}

.eg-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  margin: 0;
}

.eg-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.eg-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg3);
}

.eg-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

.eg-accent {
  color: var(--primary);
}

/* Italic display emphasis (used for inline highlights) */
.eg-em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--primary);
}