/* ============================================================ 
   GLOBAL.CSS — Boulevard Club + Root Down UX
   Strict Colour Governance System (v1.1)
   Author: Root Down UX
   Notes:
   - All pages must load this file FIRST.
   - All colours MUST be referenced using tokens below.
   - Includes dark-mode-ready placeholders (inactive).
   ============================================================ */

/* ------------------------------------------------------------
   BRAND TOKENS – BOULEVARD CLUB
   ------------------------------------------------------------ */
:root {
  /* Primary Brand */
  --boulevard-deep-blue: #080F5B;
  --boulevard-primary-blue: #0D19A3;
  --boulevard-warm-gold: #E4C580;
  --boulevard-aqua-green: #15DB95;
  --boulevard-warm-soft-cream: #F4E4C1;

  /* ----------------------------------------------------------
     BRAND TOKENS – ROOT DOWN UX
     (logo + identity colours)
     ---------------------------------------------------------- */
  --rdx-neon-green: #39FF14;       /* logo green */
  --rdx-dark:       #001A21;       /* logo inner background */
  --rdx-charcoal:   #0A0F10;       /* UI/typography black */

  --rdx-footer-text: #ffffff;
  --rdx-footer-accent: #00c27a;    /* alt neon logo green: #39FF14 */
  --rdx-footer-accent-rgb: 0, 194, 122;

  /* ----------------------------------------------------------
     NEUTRALS & UTILITY
     ---------------------------------------------------------- */
  --white:  #ffffff;
  --black:  #000000;

  --grey-050: #f8f9fa;
  --grey-100: #f1f3f5;
  --grey-200: #e9ecef;
  --grey-300: #dee2e6;
  --grey-600: #6c757d;
  --grey-900: #212529;

  /* ----------------------------------------------------------
     SEMANTIC / FUNCTIONAL TOKENS (preferred for components)
     ---------------------------------------------------------- */

  /* Surfaces */
  --surface-main:  var(--white);
  --surface-alt:   #fafafa;
  --surface-muted: #f5f7ff;

  /* Text */
  --text-main:    #111111;
  --text-muted:   #555555;
  --text-inverse: var(--white);

  /* Accent Mapping (used site-wide e.g. nav underline) */
  --accent:          var(--boulevard-aqua-green);      /* primary highlight */
  --accent-strong:   var(--boulevard-primary-blue);    /* stronger/action */
  --accent-soft:     var(--boulevard-warm-soft-cream); /* subtle highlight */
  --accent-contrast: var(--white);                     /* text on accent */

  --accent-text:     var(--boulevard-aqua-green);
  --accent-gradient: linear-gradient(
                        to right,
                        var(--boulevard-warm-gold),
                        var(--boulevard-aqua-green)
                     );

  /* Shadows (colour only) */
  --shadow-light:  rgba(0,0,0,0.06);
  --shadow-medium: rgba(0,0,0,0.12);
  --shadow-strong: rgba(0,0,0,0.28);

  /* Shadow utilities (full declarations for components) */
  --shadow-header: 0 4px 10px rgba(0,0,0,0.05);
  --shadow-footer: 0 -3px 10px rgba(0,0,0,0.12);

  /* Borders */
  --border-light: rgba(0,0,0,0.08);
  --border-med:   rgba(0,0,0,0.18);
  --border-dark:  rgba(0,0,0,0.25);

  /* Interactions */
  --hover-wash-blue:  rgba(13,25,163,0.06);    /* subtle blue hover used in nav */
  --hover-wash-green: rgba(21,219,149,0.06);   /* green interaction layer */
  --hover-wash-gold:  rgba(228,197,128,0.10);
  --hover-wash-light: rgba(255,255,255,0.06);  /* light hover (mobile nav) */

  --focus-ring: rgba(21,219,149,0.35);         /* green focus ring */

  /* Typography */
  --font-heading: 'Montserrat', system-ui, Arial, sans-serif;
  --font-body:    'Poppins', system-ui, Arial, sans-serif;

  --font-size-base: 16px;      /* used on body; 1rem = 10px via html setting */
  --font-size-lg:   1.25rem;
  --font-size-sm:   0.9rem;

  --line-height-base:    1.55;
  --line-height-heading: 1.25;

  /* Optional component typography tokens */
  --font-size-nav-link: 1.45rem;
  --font-size-footer:   1.4rem;

  /* Layout + Spacing */
  --container-w: 1200px;
  --gutter:      1.25rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --space-sm: 0.8rem;
  --space-md: 1.6rem;
  --space-lg: 2.4rem;

  /* Motion */
  --motion-fast:   0.2s ease;
  --motion-normal: 0.35s ease;
  --motion-slow:   0.55s ease;

    /* ----------------------------------------------------------
     NEWS & EVENTS – EXTENDED ACCENTS
     (used for month buttons, feature heading, badges)
     ---------------------------------------------------------- */
  --boulevard-accent-1: #0B63FF;
  --boulevard-accent-2: #F7B731;
  --boulevard-accent-3: #28A745;
  --boulevard-accent-4: #007BFF;

  /* Accent utilities */
  --accent-raw: var(--accent);
  --accent-30: rgba(21, 219, 149, 0.35); /* green ring used on cards */

  /* ----------------------------------------------------------
     NEWS & EVENTS – SEMANTIC TOKENS
     ---------------------------------------------------------- */
  --news-page-bg: var(--grey-050);           /* subtle page background */
  --news-month-bg: var(--grey-100);          /* inactive month buttons */
  --news-logo-vertical: var(--grey-600);     /* sidebar vertical text */
  --news-notice-border: var(--grey-200);     /* notice divider */

  /* Features wrapper subtle gradient (blue-ish tint on white) */
  --news-features-wrapper-bg: linear-gradient(
    135deg,
    rgba(13, 25, 163, 0.03),
    var(--surface-main) 65%
  );

  /* Noticeboard upcoming gradient (soft blue wash) */
  --news-notice-upcoming-bg: linear-gradient(
    90deg,
    rgba(13, 25, 163, 0.04),
    var(--surface-main)
  );

  /* Card depth tints (derived from brand accents) */
  --news-feature-card-depth: rgba(11, 99, 255, 0.06);   /* accent-1 @ 6% */
  --news-event-card-depth: linear-gradient(
    180deg,
    rgba(21, 219, 149, 0.06) 0%,
    rgba(21, 219, 149, 0.10) 100%
  );
  --news-notice-card-depth: rgba(0, 123, 255, 0.06);    /* accent-4 @ 6% */

  /* Modal backdrop */
  --modal-backdrop: rgba(0, 0, 0, 0.75);

  /* ----------------------------------------------------------
     DARK MODE READY TOKENS (INACTIVE)
     To activate later:
     - add `html[data-theme='dark']` overrides
     ---------------------------------------------------------- */
  /* These do nothing yet — safe placeholders */
  --dm-surface-0: #0d0f12;
  --dm-surface-1: #16181d;
  --dm-surface-2: #1f2227;

  --dm-text-main:  #f5f5f5;
  --dm-text-muted: #cccccc;

  --dm-accent:      #15DB95;             /* same accent works well in dark mode */
  --dm-accent-ring: rgba(21,219,149,0.45);

  --dm-border-light: rgba(255,255,255,0.12);
  --dm-border-med:   rgba(255,255,255,0.22);
  --dm-border-dark:  rgba(255,255,255,0.32);

    /* Home / index page derived tokens */
  --hero-overlay: linear-gradient(
    180deg,
    rgba(8,15,91,0.18),
    rgba(0,0,0,0.18)
  );

  --split-overlay: linear-gradient(
    180deg,
    rgba(8,15,91,0.28),
    rgba(8,15,91,0.12)
  );

  --scroller-bg: linear-gradient(
    180deg,
    rgba(255,255,255,0.98),
    rgba(244,228,193,0.98)
  );

  --scroller-border: rgba(8,15,91,0.08);
  --scroller-shadow: 0 10px 30px rgba(8,15,91,0.08);
  --scroller-divider: rgba(8,15,91,0.06);

  /* Z-Index Layers (UI stacking) */
  --z-base: 0;
  --z-header: 200;          /* sticky navbar */
  --z-multiscroller: 150;   /* ticker – below header, above content */
  --z-modal-overlay: 900;   /* dark overlay */
  --z-modal-content: 910;   /* modal card */
  --z-modal-close: 920;     /* close button */


}

/* ------------------------------------------------------------
   RESET & GLOBAL TYPOGRAPHY
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  font-size: 62.5%;   /* 1rem = 10px */
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: var(--surface-main);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  overflow-x: hidden;
  overflow: visible !important;
}

/* ------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--line-height-heading);
  margin: 0 0 0.75rem;
  color: var(--boulevard-deep-blue);
}

/* ------------------------------------------------------------
   PARAGRAPHS
   ------------------------------------------------------------ */
p {
  margin: 0 0 1rem;
  line-height: var(--line-height-base);
  color: var(--text-main);
}

/* ------------------------------------------------------------
   LAYOUT UTILITIES
   ------------------------------------------------------------ */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hidden {
  display: none !important;
}

/* ============================================================
   GLOBAL MODAL WRAPPER — Used by Contact + Future Modals
   ============================================================ */

/* ============================================
   UNIVERSAL MODAL WRAPPER
   ============================================ */
.booking-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(5, 5, 5, 0.75) !important;
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-overlay, 900) !important;
  display: none;
  justify-content: center;
  align-items: center;
}

/* ===============================================
   UNIVERSAL MODAL CONTENT BOX
   Shared modal box styling (Suite Hire + Contact)
   =============================================== */
.booking-modal-content {
  position: relative !important;
  margin: 12% auto !important;
  width: 85% !important;
  max-width: 450px !important;
  background: var(--grey-900) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 1rem !important;
  padding: 2.4rem !important;
  text-align: center !important;
  z-index: var(--z-modal-content, 910) !important;
}

/* Allow Contact modals to override border colour */
.booking-modal-content.contact-error {
  border-color: var(--boulevard-warm-gold) !important;
}

/* Shared close button */
.booking-close {
  position: absolute !important;
  top: 12px !important;
  right: 20px !important;
  font-size: 2.6rem !important;
  color: var(--white) !important;
  z-index: var(--z-modal-close, 920) !important;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.booking-close:hover {
  transform: scale(1.18);
  color: var(--accent) !important;
}

/* ============================================================
   GLOBAL TOAST NOTIFICATION
   ============================================================ */

.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--boulevard-aqua-green);
  color: var(--white);
  padding: 1.4rem 1.8rem;
  border-radius: 0.6rem;
  box-shadow: 0 0.6rem 1.6rem rgba(0,0,0,0.25);
  font-size: 1.4rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: var(--z-toast, 950);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hidden {
  display: none;
}