/* ============================================================
   SHREYAMAHAREDDY.COM — GLOBAL TOKENS
   Personal Brand Identity · V9 Dubai Launch
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Solway:wght@300;400;500;700;800&display=swap');

:root {
  /* ── Palette — V9 spec (governs over typography.css legacy hex) ── */
  --cream:       #F7F3ED;
  --cream-dark:  #EDE8DF;
  --charcoal:    #1A1A1A;
  --burgundy:    #5C1A2E;
  --gold:        #C9A84C;
  --muted:       #7A6E65;
  --rule:        #D9D2C7;
  --white:       #FFFFFF;

  /* ── Fonts ── */
  --f-display: 'Cinzel', 'Times New Roman', serif;   /* identity / nav / overlines */
  --f-accent:  'Cormorant Garamond', 'Georgia', serif; /* headlines / pull quotes */
  --f-body:    'Solway', 'Georgia', serif;             /* body copy / UI */

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --max-w: 1100px;
  --nav-h: 68px;
}

@media (max-width: 860px) {
  :root {
    --space-lg: 2.75rem;
    --space-xl: 4.25rem;
  }
}
@media (max-width: 540px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.25rem;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.eyebrow {
  font-family: var(--f-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--cream { color: var(--cream); opacity: 0.7; }

.gold-rule {
  width: 48px; height: 1.5px;
  background: var(--gold);
  margin-bottom: var(--space-md);
}

h1, h2, h3, h4 { font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}