/* ============================================================
   TINYDISCO — Design Tokens & Theme Utilities
   All thematic colors flow through these CSS variables.
   To retheme the site, edit the values in :root only.
   ============================================================ */

:root {
  /* ── Typography ───────────────────────────────────────────── */
  --font-heading: 'Instrument Serif', serif;

  /* ── Backgrounds ─────────────────────────────────────────── */
  --color-bg:         #FAF4EC;       /* page base — Sand */
  --color-bg-section: #FAF4EC;       /* sections — same as base */
  --color-bg-card:    #FAF4EC;       /* cards, image placeholders — warm white */
  --color-bg-nav:     #FAF4EC;      

  /* ── Borders ──────────────────────────────────────────────── */
  --color-border:     #D28A7A;       /* Blush */

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text-primary:   #304737;   /* headings, body — Charcoal */
  --color-text-secondary: #1C1C1E;   /* captions, meta — Sage */

  /* #6B7F6D */
  --color-text-nav:       #304737;   /* navbar links — Forest */

  /* ── Accent (Marigold) ────────────────────────────────────── */
  --color-accent:      #D9A441;
  --color-accent-text: #1C1C1E;      /* text placed ON accent bg — Charcoal */
}

/* ── Headings ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-style: italic;
}

/* ── Utility classes ────────────────────────────────────────── */

/* Backgrounds */
.bg-theme-base    { background-color: var(--color-bg); }
.bg-theme-section { background-color: var(--color-bg-section); }
.bg-theme-card    { background-color: var(--color-bg-card); }
.bg-theme-nav     { background-color: var(--color-bg-nav); }
.bg-theme-accent  { background-color: var(--color-accent); }

/* Borders */
.border-theme               { border-color: var(--color-border); }
.border-theme-primary       { border-color: var(--color-text-primary); }
.divide-theme > * + *       { border-color: var(--color-border); }

/* Text */
.text-theme-primary         { color: var(--color-text-primary); }
.text-theme-secondary       { color: var(--color-text-secondary); }
.text-theme-nav             { color: var(--color-text-nav); }
.text-theme-accent          { color: var(--color-accent); }
.text-on-accent             { color: var(--color-accent-text); }

/* Hover variants */
.hover-text-primary:hover   { color: var(--color-text-primary); }
.hover-text-secondary:hover { color: var(--color-text-secondary); }

/* ── Sticky header: site-nav alone (no banner) ──────────────────────────────── */
site-nav {
  display: block;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* When the banner is active, #topbar wraps both banner + site-nav */
#topbar {
  position: sticky;
  top: 0;
  z-index: 50;
}
#topbar site-nav {
  position: static;
}

/* ── Founder's Rate Promotion ───────────────────────────────────────────────── */

#founders-rate-banner {
  background: var(--color-accent);
  color: var(--color-accent-text);
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
#founders-rate-banner a {
  color: var(--color-accent-text);
  text-decoration: underline;
  margin-left: 0.6rem;
  font-weight: 600;
}

.founders-rate-homepage {
  background: var(--color-text-primary);
  color: var(--color-bg);
  padding: 4rem 1.5rem;
  text-align: center;
}
.founders-rate-homepage .fr-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.founders-rate-homepage h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.founders-rate-homepage p {
  font-size: 0.9rem;
  opacity: 0.8;
  max-width: 32rem;
  margin: 0 auto 1.5rem;
}
.founders-rate-homepage a.fr-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
}

.founders-rate-packages {
  border: 1.5px solid var(--color-accent);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.founders-rate-packages .fr-tag {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.founders-rate-packages strong {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-text-primary);
}
.founders-rate-packages span {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.founders-rate-packages a {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: underline;
  white-space: nowrap;
}