/* ============================================================
   DePaiva Advocacia — Colors & Typography System
   ============================================================ */

/* ── Font Faces ─────────────────────────────────────────── */
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Thin.ttf'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-ThinItalic.ttf'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Light.ttf'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-LightItalic.ttf'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-BoldItalic.ttf'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Black.ttf'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-BlackItalic.ttf'); font-weight: 900; font-style: italic; }
@font-face { font-family: 'League Spartan'; src: url('fonts/LeagueSpartan-VariableFont_wght.ttf'); font-weight: 100 900; font-style: normal; }

/* ── Color Palette ──────────────────────────────────────── */
:root {
  /* Brand Gold */
  --gold-dark:        #B07C4B;
  --gold-light:       #BE9D7C;
  --gold-muted:       #D4B896;

  /* Navy */
  --navy-deep:        #1A243F;
  --navy-mid:         #283B7D;
  --navy-light:       #5870B2;

  /* Neutral */
  --off-white:        #F1FAEE;
  --white:            #FFFFFF;
  --black:            #0F0F0F;

  /* Derived / Semantic */
  --bg-primary:       #FFFFFF;
  --bg-secondary:     #F1FAEE;
  --bg-dark:          #1A243F;
  --bg-card:          #FFFFFF;

  --fg-primary:       #1A243F;
  --fg-secondary:     #4A5568;
  --fg-muted:         #8A95A3;
  --fg-on-dark:       #F1FAEE;
  --fg-on-dark-muted: rgba(241,250,238,0.65);

  --accent:           #B07C4B;
  --accent-hover:     #9A6B3C;
  --accent-light:     #BE9D7C;
  --accent-subtle:    rgba(176,124,75,0.12);

  --border:           rgba(26,36,63,0.12);
  --border-gold:      rgba(176,124,75,0.35);

  /* Elevation / Shadow */
  --shadow-sm:        0 1px 3px rgba(26,36,63,0.08), 0 1px 2px rgba(26,36,63,0.06);
  --shadow-md:        0 4px 16px rgba(26,36,63,0.10), 0 2px 6px rgba(26,36,63,0.07);
  --shadow-lg:        0 12px 40px rgba(26,36,63,0.14), 0 4px 12px rgba(26,36,63,0.08);
  --shadow-gold:      0 4px 20px rgba(176,124,75,0.22);
}

/* ── Typography Scale ───────────────────────────────────── */
:root {
  /* Families */
  --font-display:     'League Spartan', Georgia, serif;
  --font-body:        'Lato', system-ui, sans-serif;

  /* Display sizes (League Spartan) */
  --text-display-xl:  clamp(3rem, 5vw, 5rem);
  --text-display-lg:  clamp(2.25rem, 3.5vw, 3.5rem);
  --text-display-md:  clamp(1.75rem, 2.5vw, 2.5rem);
  --text-display-sm:  clamp(1.375rem, 1.8vw, 1.875rem);

  /* Body sizes (Lato) */
  --text-xl:          1.25rem;
  --text-lg:          1.125rem;
  --text-base:        1rem;
  --text-sm:          0.875rem;
  --text-xs:          0.75rem;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-caps:    0.18em;
  --tracking-wide:    0.08em;
  --tracking-normal:  0em;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  /* Border radii */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        16px;
  --radius-pill:      999px;

  /* Spacing scale (base 4px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ── Semantic Element Styles ───────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--accent-hover); }

/* ── Utility Classes ─────────────────────────────────────  */
.text-gold   { color: var(--gold-dark); }
.text-navy   { color: var(--navy-deep); }
.text-muted  { color: var(--fg-muted); }
.text-light  { color: var(--fg-on-dark); }

.bg-dark     { background: var(--bg-dark); }
.bg-navy     { background: var(--navy-mid); }
.bg-gold     { background: var(--gold-dark); }
.bg-offwhite { background: var(--off-white); }

.uppercase-spaced {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ── Button Base ─────────────────────────────────────────  */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(176,124,75,0.35);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--border-gold);
}
.btn-outline:hover {
  background: var(--accent-subtle);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-on-dark);
  border: 1.5px solid rgba(241,250,238,0.3);
}
.btn-ghost:hover {
  background: rgba(241,250,238,0.08);
}

/* ── Card Base ────────────────────────────────────────────  */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  border: 1px solid var(--border);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  transition: all 0.25s ease;
}