/* ==========================================================================
   GLOBAL DESIGN TOKENS
   Extracted from original WordPress inline styles.
   Values are unchanged from the source design — only centralized here.
   ========================================================================== */

:root {

  /* Typography — matches the live site's system font stack */
  --font-body: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Brand colors */
  --color-gold: #f2b233;
  --color-gold-dark: #e0a126;
  --color-black: #111111;
  --color-white: #ffffff;

  /* Header — solid dark premium surface (matches footer navy) */
  --color-header-surface-top: #1a1f2e;
  --color-header-surface-bottom: #0e121b;
  --color-header-border: rgba(255, 255, 255, 0.09);
  --color-header-shadow-outer: rgba(0, 0, 0, 0.5);
  --color-header-shadow-inset: rgba(255, 255, 255, 0.06);

  /* Header text */
  --color-text-on-glass: #ffffff;
  --color-text-on-glass-muted: rgba(255, 255, 255, 0.6);
  --color-nav-text: rgba(255, 255, 255, 0.68);

  /* Nav interactive states */
  --color-nav-hover-bg: rgba(255, 255, 255, 0.07);
  --color-nav-active-bg: rgba(242, 178, 51, 0.14);
  --color-nav-active-border: rgba(242, 178, 51, 0.32);
  --color-nav-active-text: #f2b233;

  /* Buttons */
  --color-btn-outline-bg: rgba(255, 255, 255, 0.05);
  --color-btn-outline-bg-hover: rgba(255, 255, 255, 0.12);
  --color-btn-outline-border: rgba(255, 255, 255, 0.16);

  /* Mobile menu */
  --color-mobile-bg: #141824;
  --color-mobile-border: rgba(255, 255, 255, 0.1);
  --color-mobile-link-bg: rgba(255, 255, 255, 0.05);

  /* Toggle button */
  --color-toggle-bg: rgba(255, 255, 255, 0.06);
  --color-toggle-border: rgba(255, 255, 255, 0.16);

  /* Blur */
  --blur-glass: 18px;
  --blur-mobile-menu: 20px;

  /* Transitions */
  --transition-fast: 0.25s;

  /* Breakpoints (reference only — used in media queries) */
  --breakpoint-header-collapse: 980px;
}