/* ============================================================
   theme.css — White-Label Brand Theme
   ============================================================
   This file is YOURS. Edit it freely.
   It overrides the default WaitWithUs color palette defined
   in main.css. main.css is upstream — never edit it directly.

   HOW TO USE:
   1. Replace the color values below with your brand palette.
   2. Uncomment the font section if you want different typefaces.
   3. Add any additional CSS overrides at the bottom.
   4. This file is loaded after main.css, so your values win.

   NEVER edit main.css. Your changes there will be lost on
   the next upstream update and will cause merge conflicts.
   ============================================================ */

:root {

  /* ── Core palette ────────────────────────────────────────
     These five variables control the entire visual identity.
     Change them and the whole site repaints.              */

  --void:        #050508;   /* page background — keep very dark     */
  --deep-space:  #0e0e18;   /* card / panel background              */
  --starlight:   #c9a84c;   /* PRIMARY ACCENT — buttons, rings, gold */
  --pale-gold:   #e8dfc8;   /* light accent — wordmark, headings    */
  --celestial:   #f5f0e8;   /* primary body text                    */

  /* ── Secondary palette ───────────────────────────────────
     Derived from the core. Usually fine to leave as-is.   */

  --nebula:      #1c1c30;   /* subtle section tint                  */
  --gold-dim:    rgba(212,175,90,0.92);   /* gold taglines          */
  --gold-faint:  rgba(212,175,90,0.18);   /* gold borders           */
  --gold-mid:    rgba(212,175,90,0.60);   /* citations, links       */
  --gold-step:   rgba(212,175,90,0.20);   /* decorative step nums   */

  /* ── Semantic colors ─────────────────────────────────────
     These serve specific UI purposes. Change with care.   */

  --green-live:  rgba(76,175,120,0.88);   /* live session indicator */
  --error-text:  rgba(255,120,100,0.85);  /* error messages         */

  /* ── Text scale ──────────────────────────────────────────
     Middle lavender — readable on dark backgrounds.
     Opacity decreases as font size increases (by design).
     Adjust if your background color differs significantly
     from the default void black.                          */

  --text-lg:      rgba(228,215,233,0.72);   /* headings 20px+       */
  --text-body:    rgba(228,215,233,0.78);   /* body 14–15px         */
  --text-sm:      rgba(228,215,233,0.82);   /* secondary 13px       */
  --text-xs:      rgba(228,215,233,0.84);   /* small 12px           */
  --text-xxs:     rgba(228,215,233,0.86);   /* footer 11px          */
  --text-tiny:    rgba(228,215,233,0.88);   /* labels 10px          */
  --text-caption: rgba(228,215,233,0.66);   /* helper text          */
  --text-hint:    rgba(228,215,233,0.40);   /* faintest labels      */

}

/* ── Font overrides ──────────────────────────────────────────
   The default stack is Cinzel (display) + Cormorant Garamond
   (serif/italic) + Outfit (body). To change fonts:
   1. Add your Google Fonts link to inc/layout.php
   2. Uncomment and edit the rules below.

body {
  font-family: 'Your Body Font', sans-serif;
}
.wordmark, .hero-wordmark, .page-title, .timer-time,
.proof-stat-num, .countdown-display {
  font-family: 'Your Display Font', serif;
}
.footer-quote, .tradition-quote-text, .session-prompt-text,
.story-body p, .faq-q, blockquote {
  font-family: 'Your Serif Font', serif;
}
*/

/* ── Additional overrides ────────────────────────────────────
   Add any CSS you need below this line.
   These rules will persist through upstream updates as long
   as you do not modify main.css directly.

   Examples:
   - Change the nav height
   - Adjust button border-radius
   - Override the footer layout
   - Add your organization's custom components

   Keep changes minimal. The less you override, the fewer
   conflicts you will encounter on upstream updates.        */