/* ============================================================
   Beside · Design tokens
   ------------------------------------------------------------
   The single source of truth for colour, type, spacing, radii.
   Every other CSS file (and BuddyBoss component) reads from
   these custom properties.
   ============================================================ */

:root {
  /* -- Palette ------------------------------------------------ */
  --bg-primary:        #FCFBF7;  /* warm off-white, page background */
  --bg-secondary:      #F6F5F1;  /* slightly deeper, card backgrounds */
  --text-primary:      #353534;  /* near-black, warm undertone */
  --text-secondary:    #636260;  /* mid-grey, secondary text — min 4.5:1 on bg-primary */

  --accent:            #960462;  /* plum — primary CTA */
  --accent-dark:       #5F023E;  /* plum — hover / pressed */
  --accent-light:      #F2E0EC;  /* plum — tint for hover bg / "current" */
  --accent-on-dark:    #D87BAE;  /* brighter plum, readable on dark sections */

  --teal:              #04A5BB;  /* secondary accent — decorative/border only */
  --teal-text:         #007A8C;  /* darkened teal for text — 4.6:1 on bg-primary */
  --teal-light:        #DCF1F4;  /* tag / pill background */

  --border:            #E6E3E1;  /* hairline */
  --border-strong:     #D3D3D1;  /* darker hairline (rare) */

  --white:             #FFFFFF;
  --black:             #000000;

  /* -- Backward-compat aliases (used by existing page templates) ----------- */
  --sage:              var(--teal);
  --sage-light:        var(--teal-light);

  /* Greys (sparse use; prefer --text-secondary) */
  --grey-1:            #4A4A46;  /* dark border on dark backgrounds */
  --grey-2:            #8E8F94;
  --grey-3:            #AFB0B6;

  /* -- Type --------------------------------------------------- */
  --font-display:      "Lora", Georgia, "Times New Roman", serif;
  --font-body:         "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --fs-display:        48px;
  --fs-h1:             36px;
  --fs-h2:             28px;
  --fs-h3:             22px;
  --fs-body:           18px;
  --fs-small:          14px;
  --fs-label:          12px;

  --lh-headings:       1.2;
  --lh-body:           1.7;
  --tracking-tight:    -0.015em;
  --tracking-eyebrow:  0.12em;

  /* -- Spacing (8px base) ------------------------------------ */
  --space-1:           8px;
  --space-2:           16px;
  --space-3:           24px;
  --space-4:           32px;
  --space-5:           48px;
  --space-6:           80px;

  --section-y-desktop: 80px;
  --section-y-mobile:  48px;

  /* -- Radii -------------------------------------------------- */
  --radius-card:       12px;
  --radius-button:     8px;
  --radius-input:      4px;
  --radius-pill:       999px;

  /* -- Layout ------------------------------------------------- */
  --content-text:      720px;  /* prose-friendly max width */
  --content-wide:      1100px; /* full-bleed layout max width */
  --nav-height:        64px;
}

/* ============================================================
   BuddyBoss component re-binding
   ------------------------------------------------------------
   BuddyBoss reads from --bb-* properties at runtime. Re-binding
   here re-skins every BB component without copying template files.
   If you see a BB element rendering with the default cobalt-blue
   palette, find the --bb-* property it reads in DevTools and add
   it to this block.
   ============================================================ */

:root {
  /* Core tokens */
  --bb-primary-color:                       var(--accent);
  --bb-primary-color-hover:                 var(--accent-dark);
  --bb-secondary-color:                     var(--teal);

  --bb-body-background-color:               var(--bg-primary);
  --bb-content-background-color:            var(--bg-primary);
  --bb-content-alternate-background-color:  var(--bg-secondary);
  --bb-content-border-color:                var(--border);

  --bb-body-text-color:                     var(--text-primary);
  --bb-headings-color:                      var(--text-primary);
  --bb-link-color:                          var(--accent);
  --bb-link-hover-color:                    var(--accent-dark);

  /* Type */
  --bb-body-font-family:                    var(--font-body);
  --bb-headings-font-family:                var(--font-display);
  --bb-body-font-size:                      var(--fs-body);
  --bb-line-height-body:                    var(--lh-body);
  --bb-line-height-headings:                var(--lh-headings);

  /* Buttons */
  --bb-button-background:                   var(--accent);
  --bb-button-background-hover:             var(--accent-dark);
  --bb-button-text-color:                   var(--white);
  --bb-button-text-color-hover:             var(--white);
  --bb-button-border-radius:                var(--radius-button);

  /* Cards / inputs */
  --bb-card-border-radius:                  var(--radius-card);
  --bb-input-border-radius:                 var(--radius-input);
  --bb-input-border-color:                  var(--border);
  --bb-input-focus-border-color:            var(--accent);

  /* Tags & pills */
  --bb-tag-background:                      var(--teal-light);
  --bb-tag-text-color:                      var(--teal);

  /* Notifications */
  --bb-notification-background:             var(--accent);
  --bb-notification-text-color:             var(--white);
}

/* ============================================================
   LearnDash component re-binding
   ============================================================ */

.learndash-wrapper {
  --ld-color-primary:           var(--accent);
  --ld-color-primary-hover:     var(--accent-dark);
  --ld-color-secondary:         var(--teal);
  --ld-color-headings:          var(--text-primary);
  --ld-color-text:              var(--text-primary);
  --ld-color-background:        var(--bg-primary);
  --ld-color-card-background:   var(--bg-secondary);
  --ld-color-border:            var(--border);
}