/*
  Apple-inspired typography system for Pistachios.
  Keeps text calm, premium and readable across light, dark and image-heavy sections.
*/

:root {
  --type-graphite: #1d1d1f;
  --type-graphite-soft: rgba(29, 29, 31, 0.78);
  --type-graphite-muted: rgba(29, 29, 31, 0.62);
  --type-cream: #f7f3e9;
  --type-cream-soft: rgba(247, 243, 233, 0.82);
  --type-cream-muted: rgba(247, 243, 233, 0.66);
  --type-brand-accent: #8f7f4d;
  --shadow-on-image: 0 2px 8px rgba(0, 0, 0, 0.32), 0 12px 34px rgba(0, 0, 0, 0.24);
  --shadow-on-dark: 0 1px 2px rgba(0, 0, 0, 0.38), 0 10px 32px rgba(0, 0, 0, 0.28);
  --shadow-on-light: 0 1px 1px rgba(255, 255, 255, 0.78), 0 10px 26px rgba(44, 52, 36, 0.08);
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body,
.font-body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "DM Sans", "Segoe UI", sans-serif !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  color: var(--type-graphite);
}

.font-display,
h1,
h2,
h3,
h4 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "DM Sans", "Segoe UI", sans-serif !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: -0.024em;
}

h1,
.editorial-title {
  line-height: 0.96 !important;
  font-weight: 760;
  text-wrap: balance;
}

h2 {
  line-height: 1.04 !important;
  font-weight: 720;
  text-wrap: balance;
}

h3 {
  line-height: 1.12 !important;
  font-weight: 680;
}

p,
li,
dd,
address,
.lead-copy {
  line-height: 1.62;
}

.text-brand-dark,
.text-brand-green,
.text-gray-900,
.text-gray-800 {
  color: var(--type-graphite) !important;
}

.text-brand-grey,
.text-gray-600,
.text-gray-500 {
  color: var(--type-graphite-soft) !important;
}

.text-white,
.text-white\/90,
.text-white\/80,
.text-white\/75,
.text-white\/70,
.text-white\/60,
.text-white\/50 {
  color: var(--type-cream) !important;
  text-shadow: var(--shadow-on-dark);
}

.text-white\/80,
.text-white\/75,
.text-white\/70 {
  color: var(--type-cream-soft) !important;
}

.text-white\/60,
.text-white\/50 {
  color: var(--type-cream-muted) !important;
}

.text-brand-gold {
  color: var(--type-brand-accent) !important;
}

.bg-brand-dark h1,
.bg-brand-dark h2,
.bg-brand-dark h3,
.bg-brand-dark p,
.bg-brand-green h1,
.bg-brand-green h2,
.bg-brand-green h3,
.bg-brand-green p,
.bg-brand-grey h1,
.bg-brand-grey h2,
.bg-brand-grey h3,
.bg-brand-grey p,
section[style*="background:#1A1A1A"] h1,
section[style*="background:#1A1A1A"] h2,
section[style*="background:#1A1A1A"] h3,
section[style*="background:#1A1A1A"] p,
section[style*="background:#111"] h1,
section[style*="background:#111"] h2,
section[style*="background:#111"] h3,
section[style*="background:#111"] p,
section[style*="background:#1e"] h1,
section[style*="background:#1e"] h2,
section[style*="background:#1e"] h3,
section[style*="background:#1e"] p {
  color: var(--type-cream-soft);
  text-shadow: var(--shadow-on-dark);
}

.bg-brand-dark .text-brand-gold,
.bg-brand-green .text-brand-gold,
.bg-brand-grey .text-brand-gold,
section[style*="background:#1A1A1A"] .text-brand-gold,
section[style*="background:#111"] .text-brand-gold,
section[style*="background:#1e"] .text-brand-gold {
  color: #d6c48a !important;
}

.hero-text-shadow,
.hero-eyebrow-shadow,
.hero h1,
section[aria-label*="hero"] h1,
section[style*="background:#1A1A1A"] h2,
section[style*="background:#1A1A1A"] p,
section[style*="background:#111"] h2,
section[style*="background:#111"] p,
section[style*="background:#1e"] h2,
section[style*="background:#1e"] p {
  text-shadow: var(--shadow-on-image);
}

section[style*="background-image"] h1,
section[style*="background-image"] h2,
section[style*="background-image"] h3,
section[style*="background-image"] p {
  text-shadow: var(--shadow-on-light);
}

section[style*="background-image"] .text-white,
section[style*="background-image"] .text-white\/80,
section[style*="background-image"] .text-white\/70,
section[style*="background-image"] .text-white\/60,
section[style*="background-image"] .text-white\/50 {
  text-shadow: var(--shadow-on-image);
}

section[style*="background-image"] .apple-card h1,
section[style*="background-image"] .apple-card h2,
section[style*="background-image"] .apple-card h3,
section[style*="background-image"] .apple-card p {
  color: inherit;
  text-shadow: none;
}

.apple-eyebrow,
.eyebrow,
.sub-label,
.menu-section-label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "DM Sans", sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.22em !important;
  line-height: 1.2;
}

.apple-card,
.menu-card,
.location-card,
.loc-card,
.coffee-card {
  color: var(--type-graphite);
}

.apple-card p,
.menu-card p,
.location-card p,
.loc-card p,
.coffee-card p {
  text-shadow: none;
}

.btn-glass,
.glass,
.apple-card {
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

.reveal {
  transition-duration: 900ms !important;
  transition-timing-function: var(--ease-apple) !important;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

#main-nav.nav-scrolled .nav-link,
#main-nav.nav-scrolled #nav-brand,
#main-nav.nav-scrolled #mobile-menu-btn {
  color: var(--type-graphite) !important;
  text-shadow: none !important;
}

#main-nav.nav-scrolled .btn-primary {
  color: var(--type-cream) !important;
  text-shadow: none !important;
}

#main-nav.nav-scrolled svg {
  color: inherit;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  h1,
  .editorial-title {
    line-height: 1.02;
    letter-spacing: -0.018em;
  }

  h2 {
    line-height: 1.08;
    letter-spacing: -0.016em;
  }

  p,
  li,
  dd {
    line-height: 1.58;
  }
}

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