/* ======================================================
   GF Hearts — CSS custom properties
   All other stylesheets consume these tokens.
   ====================================================== */

:root {
  /* Brand palette */
  --gfh-primary:    #E8602A;   /* CTA buttons only */
  --gfh-teal:       #1A7076;   /* headings, body text, desktop nav */
  --gfh-accent:     #2AB8CC;   /* default action buttons, links */
  --gfh-bg:         #F5EDD8;   /* page background */
  --gfh-surface:    #FFFFFF;   /* cards, panels */
  --gfh-text:       #1A7076;
  --gfh-text-muted: #6B8E91;

  /* GF Meter levels */
  --gfh-meter-low:  #D12B2B;
  --gfh-meter-med:  #E8602A;
  --gfh-meter-high: #2B6ED1;
  --gfh-meter-open: #5C6066;

  /* Typography */
  --gfh-font-display: 'DM Serif Display', Georgia, serif;
  --gfh-font-body:    'Lato', system-ui, sans-serif;

  /* Shape */
  --gfh-radius-pill: 50px;
  --gfh-radius-card: 12px;

  /* Bottom nav height — used for body padding on mobile */
  --gfh-bottom-nav-h: 70px;

  /* Fixed header heights for body padding compensation */
  --gfh-header-h:  125px;  /* logged-out full header (measured at runtime) */
  --gfh-app-nav-h: 52px;   /* logged-in slim app nav */
}

/* Gated on BuddyX's own dark-mode toggle state (data-bx-mode, set via the Customizer
   toggle) rather than the OS-level prefers-color-scheme, so our colors only switch when
   the rest of the site actually does - keeps dark mode in sync instead of patchy.
   data-bx-mode="auto" additionally needs the prefers-color-scheme check itself, since
   BuddyX sets the literal "auto" attribute value rather than resolving it - matches the
   pairing convention BuddyX's own bx-tokens-applied.css uses for the same reason. */
:root[data-bx-mode="dark"] {
  --gfh-bg:         #0F1F20;
  --gfh-surface:    #1A3235;
  --gfh-text:       #E8DFC8;
  --gfh-text-muted: #8AABAE;
  --gfh-teal:       #2AB8CC;
  /* primary / accent / meter colors stay the same in dark mode */
}

@media (prefers-color-scheme: dark) {
  :root[data-bx-mode="auto"] {
    --gfh-bg:         #0F1F20;
    --gfh-surface:    #1A3235;
    --gfh-text:       #E8DFC8;
    --gfh-text-muted: #8AABAE;
    --gfh-teal:       #2AB8CC;
  }
}