/* theme.css — The Grumpy Chef Unified Design System (2025) */

/* Self-hosted fonts — eliminates render-blocking Google Fonts CDN request */

/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}

/* Oswald */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/oswald-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/oswald-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/oswald-700.woff2') format('woff2');
}

/* JetBrains Mono */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
}

:root {
  /* Color Palette: Liquid Gold & Shadow Navy */
  --navy-deep: #050B14;
  --navy-main: #0A1628;
  --navy-surface: rgba(13, 21, 38, 0.85);
  /* For Glassmorphism */
  --navy-border: #1A2D4D;

  --gold-liquid: #D4AF37;
  --gold-glow: rgba(212, 175, 55, 0.15);
  --gold-border: rgba(212, 175, 55, 0.35);

  --silver-steel: #E2E8F0;
  --white-soft: #F8F9FA;
  --white-dim: #B8BEC8;

  --red-rebel: #C53030;
  --green-sage: #2D4A3E;
  --pine-german: #0A1A10;
  /* Deep Black Forest Green */

  /* Typography */
  --font-display: 'Oswald', 'Impact', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glassmorphism Styles */
.glass-card {
  background: var(--navy-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-liquid);
  box-shadow: 0 12px 40px 0 var(--gold-glow);
}

/* Typography Overrides */
h1,
h2,
h3,
.nav-logo {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--silver-steel);
}

.gold-accent {
  color: var(--gold-liquid);
}

.mono-system {
  font-family: var(--font-mono);
  color: var(--gold-liquid);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Premium Button Styling */
.btn-premium {
  display: inline-block;
  padding: 14px 32px;
  background: var(--gold-liquid);
  color: var(--navy-deep);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 6px;
  border: 2px solid var(--gold-liquid);
  transition: var(--transition-fast);
  cursor: pointer;
}

.btn-premium:hover {
  background: transparent;
  color: var(--gold-liquid);
  box-shadow: 0 0 25px var(--gold-glow);
}

.btn-premium-outline {
  background: transparent;
  color: var(--white-soft);
  border: 2px solid var(--navy-border);
}

.btn-premium-outline:hover {
  border-color: var(--gold-liquid);
  color: var(--gold-liquid);
}

/* Author Bio Card — E-E-A-T */
.author-bio {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(10, 22, 40, 0.5);
  border-radius: 8px;
}
.author-bio-photo {
  border-radius: 50%;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.author-bio-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.8);
}
.author-bio-text strong {
  color: #F5F5F0;
  display: block;
  margin-bottom: 0.25rem;
}
.author-bio-text a {
  color: #D4AF37;
}