/* =============================================
   COLOR TOKENS
   Edit these two blocks to change the palette.
   All Tailwind color classes pull from here.
   ============================================= */

:root {
  --bg:            #F5F2EC;
  --bg-opacity:    rgba(245, 242, 236, 0.85);
  --ink:           #1C1814;
  --ink-muted:     #3D3830;
  --body:          #5C574E;
  --muted:         #9C978D;
  --rule:          #D8D3CA;
  --rule-hover:    #B0AA9E;
  --ink-bright:    #0D0B09;
  --link-hover-bg: #EBE7E0;

  /* =============================================
     RADIUS TOKENS
     ============================================= */

  --radius-sm:  0.25rem;  /* 4px  — inputs, tags, chips */
  --radius-md:  0.5rem;   /* 8px  — cards, buttons, images */
  --radius-lg:  1rem;     /* 16px — panels, modals */
  --radius-round: 100vw;  /* pill / circle */
}

.dark {
  --bg:            #141210;
  --bg-opacity:    rgba(20, 18, 16, 0.9);
  --ink:           #E8E4DC;
  --ink-muted:     #C9C2B3;
  --body:          #A8A294;
  --muted:         #6F6A5E;
  --rule:          #3A352E;
  --rule-hover:    #8A8478;
  --ink-bright:    #F0EBE0;
  --link-hover-bg: #1E1B18;
}

/* Background texture */
body {
  position: relative;
  background-image: url('assets/bg.webp');
  background-size: cover;
  background-position: center top;
}

.bg-blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(12px);
  background-color: var(--bg-opacity);
  -webkit-backdrop-filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}

/* Smooth theme transitions */
*, *::before, *::after {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */

.type-h1 {
  scroll-margin-top: 5rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.025em;
  color: var(--ink);
}

@media (max-width: 480px) {
  .type-h1 { font-size: 1.5rem; }
}

.type-h2 {
  scroll-margin-top: 5rem;
  font-family: 'Instrument Serif', Georgia, serif;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
@media (max-width: 480px) {
  .type-h2 { font-size: 1.25rem; }
}

.type-h3 {
  scroll-margin-top: 5rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
@media (max-width: 480px) {
  .type-h3 { font-size: 1.25rem; }
}

.type-h4 {
  scroll-margin-top: 5rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.type-p {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--body);
}

.type-p + .type-p {
  margin-top: 1.5rem;
}

.type-lead {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.125rem;
  color: var(--ink-muted);
}

.type-large {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}

.type-small {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.type-muted {
  font-size: 0.875rem;
  color: var(--muted);
}

.type-blockquote {
  margin-top: 1.5rem;
  border-left: 2px solid var(--rule);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--ink-muted);
}

.type-inline-code {
  position: relative;
  border-radius: var(--radius-sm);
  background-color: var(--rule);
  padding: 0.2rem 0.3rem;
  font-family: monospace;
  font-size: 0.875rem;
  font-weight: 600;
}

.type-list {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  list-style-type: disc;
}

.type-list > li {
  margin-top: 0.5rem;
}

/* Section labels — "Listen on", "Hosted by", etc. */
.type-label {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  /* text-transform: uppercase; */
  letter-spacing: -0.005em;
  color: var(--body);
}

/* =============================================
   COMPONENTS
   ============================================= */

.button {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  gap: 0.5rem;
  background-color: var(--rule);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  text-decoration: none;
  color: var(--ink);
  font-size: .875rem;
  font-family: Inter, system-ui, sans-serif;
}

.button:hover {
  background-color: var(--link-hover-bg);
}

.hero-image {
  width: 6.5rem;
  border-radius: var(--radius-round);
  object-fit: cover;
  object-position: top;
  aspect-ratio: 1/1;
}

/* Theme toggle icons */
#icon-sun  { display: none; }
#icon-moon { display: block; }
.dark #icon-sun  { display: block; }
.dark #icon-moon { display: none; }