@charset "UTF-8";
/*--------------------------------------------------------------
Vivid Frequency v6.2 for BuddyBoss
community.spiritual.agency

Structure:
  1. Vivid Frequency canon tokens
  2. Derived surfaces
  3. Mapping onto BuddyBoss --bb-* variables
  4. Light mode
  5. Typography
  6. Chakra tier system
  7. Component polish
  8. Accessibility floor

Every colour below traces to a bridge key under vf.brand.* or vf.chakra.*.
Nothing here is invented. Derived surfaces are computed from canon tokens
with color-mix rather than eyeballed, so they cannot drift.

The token block uses :root:root rather than :root. BuddyBoss writes its
customizer values into a :root block in wp_head, which loads after an
enqueued stylesheet. Doubling the pseudo-class raises specificity from
(0,1,0) to (0,2,0) so these win on specificity rather than on load order,
which is the difference between this working and this working by luck.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1. Vivid Frequency canon tokens
--------------------------------------------------------------*/

:root:root {
  /* Core */
  --vf-void: #0D0D1A;
  --vf-parchment: #FAFAF7;
  --vf-spirit-blue: #0896F2;
  --vf-shakti-pink: #FF0060;

  /* Light-mode flip targets */
  --vf-spirit-deep: #073B7A;
  --vf-shakti-deep: #6B0030;
  --vf-anahata-deep: #3D6500;
  --vf-ajna-deep: #6322A8;
  --vf-manipura-deep: #B8860B;
  --vf-deep-violet: #1A0533;

  /* Extended palette */
  --vf-anahata-green: #A7FF00;
  --vf-electric-violet: #9000FF;
  --vf-electric-yellow: #FFE600;
  --vf-crimson: #AB1C3D;
  --vf-magenta: #FF008B;

  /* Chakra spectrum, tier one through seven */
  --vf-t1: #FF1500;  /* Muladhara   */
  --vf-t2: #FF5500;  /* Svadhisthana */
  --vf-t3: #FFD000;  /* Manipura    */
  --vf-t4: #A7FF00;  /* Anahata     */
  --vf-t5: #0896F2;  /* Vishuddha   */
  --vf-t6: #9000FF;  /* Ajna        */
  --vf-t7: #FF008B;  /* Sahasrara   */

  /* RGB triplets. BuddyBoss composes rgba() from these, so a missing
     one silently breaks every translucent surface in the theme. */
  --vf-void-rgb: 13, 13, 26;
  --vf-parchment-rgb: 250, 250, 247;
  --vf-spirit-blue-rgb: 8, 150, 242;
  --vf-shakti-pink-rgb: 255, 0, 96;
  --vf-anahata-green-rgb: 167, 255, 0;
  --vf-crimson-rgb: 171, 28, 61;
  --vf-electric-yellow-rgb: 255, 230, 0;
  --vf-deep-violet-rgb: 26, 5, 51;
  --vf-spirit-deep-rgb: 7, 59, 122;
  --vf-anahata-deep-rgb: 61, 101, 0;

  /* Type */
  --vf-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vf-weight-body: 400;
  --vf-weight-heading: 700;

  /* Geometry. Restrained rather than pill-shaped: VF reads as
     precise, not friendly-rounded. */
  --vf-radius-button: 8px;
  --vf-radius-input: 8px;
  --vf-radius-block: 14px;
  --vf-radius-block-inner: 10px;
}

/*--------------------------------------------------------------
2. Derived surfaces

Dark mode is the default state. Surfaces lift from Void toward
Parchment in measured steps so cards separate from the page without
introducing an undocumented grey.
--------------------------------------------------------------*/

:root:root {
  --vf-surface-base: #0D0D1A;
  --vf-surface-base: var(--vf-void);

  --vf-surface-raised: #16162a;
  --vf-surface-raised: color-mix(in srgb, var(--vf-void) 94%, var(--vf-parchment));

  --vf-surface-alt: #1e1e33;
  --vf-surface-alt: color-mix(in srgb, var(--vf-void) 90%, var(--vf-parchment));

  --vf-border: rgba(250, 250, 247, 0.14);
  --vf-border: color-mix(in srgb, var(--vf-parchment) 14%, transparent);

  --vf-text: var(--vf-parchment);
  --vf-text-muted: rgba(250, 250, 247, 0.66);
  --vf-text-muted: color-mix(in srgb, var(--vf-parchment) 66%, transparent);

  /* Bright chakra colours all carry Void text. Parchment on Spirit Blue
     is roughly 3:1 and fails AA for body copy; Void on Spirit Blue is
     roughly 6:1 and passes. The same holds for Shakti Pink and Anahata
     Green, so the rule is consistent rather than case by case. */
  --vf-on-accent: var(--vf-void);
}

/*--------------------------------------------------------------
3. Mapping onto BuddyBoss
--------------------------------------------------------------*/

:root:root {
  /* Surfaces */
  --bb-body-background-color: var(--vf-surface-base);
  --bb-body-background-color-rgb: var(--vf-void-rgb);
  --bb-content-background-color: var(--vf-surface-raised);
  --bb-content-alternate-background-color: var(--vf-surface-alt);
  --bb-general-content-background-color: var(--vf-surface-raised);
  --bb-cover-image-background-color: var(--vf-surface-alt);
  --bb-content-border-color: var(--vf-border);
  --bb-content-border-color-rgb: var(--vf-parchment-rgb);

  /* Text */
  --bb-body-text-color: var(--vf-text);
  --bb-body-text-color-rgb: var(--vf-parchment-rgb);
  --bb-body-body-text-color: var(--vf-text);
  --bb-text-color: var(--vf-text);
  --bb-alternate-text-color: var(--vf-text-muted);
  --bb-alternate-text-color-rgb: var(--vf-parchment-rgb);
  --bb-headings-color: var(--vf-parchment);
  --bb-headings-color-rgb: var(--vf-parchment-rgb);

  /* Header */
  --bb-header-background: var(--vf-void);
  --bb-header-alternate-background: var(--vf-surface-raised);
  --bb-header-links: var(--vf-text);
  --bb-header-links-hover: var(--vf-spirit-blue);

  /* Side navigation */
  --bb-sidenav-background: var(--vf-surface-raised);
  --bb-sidenav-alt-background: var(--vf-surface-alt);
  --bb-sidenav-links: var(--vf-text);
  --bb-sidenav-text-regular: var(--vf-text-muted);
  --bb-sidenav-text-hover: var(--vf-parchment);
  --bb-sidenav-text-active: var(--vf-spirit-blue);
  --bb-sidenav-menu-background-color-regular: transparent;
  --bb-sidenav-menu-background-color-hover: var(--vf-surface-alt);
  --bb-sidenav-menu-background-color-active: var(--vf-surface-alt);
  --bb-sidenav-count-background-color-regular: var(--vf-shakti-pink);
  --bb-sidenav-count-background-color-hover: var(--vf-shakti-pink);
  --bb-sidenav-count-background-color-active: var(--vf-shakti-pink);
  --bb-sidenav-count-text-color-regular: var(--vf-on-accent);
  --bb-sidenav-count-text-color-hover: var(--vf-on-accent);
  --bb-sidenav-count-text-color-active: var(--vf-on-accent);

  /* Semantic */
  --bb-primary-color: var(--vf-spirit-blue);
  --bb-primary-color-rgb: var(--vf-spirit-blue-rgb);
  --bb-success-color: var(--vf-anahata-green);
  --bb-success-color-rgb: var(--vf-anahata-green-rgb);
  --bb-danger-color: var(--vf-crimson);
  --bb-danger-color-rgb: var(--vf-crimson-rgb);
  --bb-warning-color: var(--vf-t3);
  --bb-warning-color-rgb: 255, 208, 0;
  --bb-default-notice-color: var(--vf-spirit-blue);
  --bb-default-notice-color-rgb: var(--vf-spirit-blue-rgb);

  /* Primary button: Spirit Blue, Void text */
  --bb-primary-button-background-regular: var(--vf-spirit-blue);
  --bb-primary-button-background-hover: color-mix(in srgb, var(--vf-spirit-blue) 84%, var(--vf-parchment));
  --bb-primary-button-border-regular: var(--vf-spirit-blue);
  --bb-primary-button-border-hover: color-mix(in srgb, var(--vf-spirit-blue) 84%, var(--vf-parchment));
  --bb-primary-button-text-regular: var(--vf-on-accent);
  --bb-primary-button-text-regular-rgb: var(--vf-void-rgb);
  --bb-primary-button-text-hover: var(--vf-on-accent);
  --bb-primary-button-text-hover-rgb: var(--vf-void-rgb);
  --bb-primary-button-focus-shadow: 0 0 0 3px rgba(var(--vf-spirit-blue-rgb), 0.42);

  /* Secondary button: outlined Shakti Pink, filled on hover */
  --bb-secondary-button-background-regular: transparent;
  --bb-secondary-button-background-hover: var(--vf-shakti-pink);
  --bb-secondary-button-border-regular: var(--vf-shakti-pink);
  --bb-secondary-button-border-hover: var(--vf-shakti-pink);
  --bb-secondary-button-text-regular: var(--vf-shakti-pink);
  --bb-secondary-button-text-hover: var(--vf-on-accent);
  --bb-secondary-button-focus-shadow: 0 0 0 3px rgba(var(--vf-shakti-pink-rgb), 0.42);
  --bb-outline-button-focus-shadow: 0 0 0 3px rgba(var(--vf-spirit-blue-rgb), 0.42);

  /* Login and register */
  --bb-login-custom-heading-color: var(--vf-parchment);
  --bb-login-register-button-background-color-regular: var(--vf-spirit-blue);
  --bb-login-register-button-background-color-hover: color-mix(in srgb, var(--vf-spirit-blue) 84%, var(--vf-parchment));
  --bb-login-register-button-border-color-regular: var(--vf-spirit-blue);
  --bb-login-register-button-border-color-hover: color-mix(in srgb, var(--vf-spirit-blue) 84%, var(--vf-parchment));
  --bb-login-register-button-text-color-regular: var(--vf-on-accent);
  --bb-login-register-button-text-color-hover: var(--vf-on-accent);
  --bb-login-register-link-color-regular: var(--vf-spirit-blue);
  --bb-login-register-link-color-hover: var(--vf-shakti-pink);

  /* Inputs */
  --bb-input-focus-border-color: var(--vf-spirit-blue);
  --bb-input-focus-shadow: 0 0 0 3px rgba(var(--vf-spirit-blue-rgb), 0.28);

  /* Labels and tooltips */
  --bb-label-background-color: var(--vf-surface-alt);
  --bb-label-text-color: var(--vf-parchment);
  --bb-tooltip-background: var(--vf-deep-violet);
  --bb-tooltip-background-rgb: var(--vf-deep-violet-rgb);
  --bb-tooltip-color: var(--vf-parchment);

  /* Footer */
  --bb-footer-background: var(--vf-void);
  --bb-footer-widget-background: var(--vf-surface-raised);
  --bb-footer-text-color: var(--vf-text-muted);
  --bb-footer-menu-link-color-regular: var(--vf-text-muted);
  --bb-footer-menu-link-color-hover: var(--vf-parchment);
  --bb-footer-menu-link-color-active: var(--vf-spirit-blue);

  /* Activity */
  --bb-activity-topic: var(--vf-spirit-blue);

  /* Geometry */
  --bb-button-radius: var(--vf-radius-button);
  --bb-input-radius: var(--vf-radius-input);
  --bb-checkbox-radius: 4px;
  --bb-option-radius: 4px;
  --bb-block-radius: var(--vf-radius-block);
  --bb-block-radius-inner: var(--vf-radius-block-inner);
  --bb-widget-title-text-transform: uppercase;
}

/*--------------------------------------------------------------
4. Light mode

Applied by adding vf-light to <html> or <body>, and offered to
visitors who have asked their system for a light interface.

The flips follow the canon token-role rule: motif tokens flip
green-to-green, text tokens flip parchment-to-violet. Light-mode
body text is Deep Violet, never Anahata Deep.
--------------------------------------------------------------*/

.vf-light:root:root,
.vf-light :root:root,
body.vf-light {
  --vf-surface-base: var(--vf-parchment);
  --vf-surface-raised: #ffffff;
  --vf-surface-alt: color-mix(in srgb, var(--vf-parchment) 94%, var(--vf-deep-violet));
  --vf-border: color-mix(in srgb, var(--vf-deep-violet) 16%, transparent);
  --vf-text: var(--vf-deep-violet);
  --vf-text-muted: color-mix(in srgb, var(--vf-deep-violet) 68%, transparent);
  --vf-on-accent: var(--vf-parchment);

  --vf-spirit-blue: #073B7A;
  --vf-shakti-pink: #6B0030;
  --vf-anahata-green: #3D6500;
  --vf-electric-violet: #6322A8;

  --vf-spirit-blue-rgb: 7, 59, 122;
  --vf-shakti-pink-rgb: 107, 0, 48;
  --vf-anahata-green-rgb: 61, 101, 0;

  --bb-body-background-color-rgb: var(--vf-parchment-rgb);
  --bb-body-text-color-rgb: var(--vf-deep-violet-rgb);
  --bb-headings-color: var(--vf-deep-violet);
  --bb-headings-color-rgb: var(--vf-deep-violet-rgb);
  --bb-content-border-color-rgb: var(--vf-deep-violet-rgb);
  --bb-header-background: var(--vf-parchment);
  --bb-footer-background: var(--vf-parchment);
}

/*--------------------------------------------------------------
5. Typography

Plus Jakarta Sans is the canon family. It is NOT loaded from a CDN
here: estate convention self-hosts webfonts. Drop the woff2 files
into assets/fonts/ and uncomment the block below. Until then the
stack falls through to the system UI face, which is a deliberate
degradation rather than a silent one.
--------------------------------------------------------------*/

/*
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
*/

body,
button,
input,
select,
textarea,
.bb-template-v2 {
  font-family: var(--vf-font);
  font-weight: var(--vf-weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.bb-title,
.widget-title {
  font-family: var(--vf-font);
  font-weight: var(--vf-weight-heading);
  letter-spacing: -0.015em;
}

.widget-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vf-text-muted);
}

/* No italics. This is a Vivid Frequency copy rule of the same class
   as the no-em-dash rule. Enforced here so a pasted <em> cannot
   quietly break it. */
em, i, cite, address, dfn, var {
  font-style: normal;
}

/*--------------------------------------------------------------
6. Chakra tier system

The signature element. Seven membership tiers carry seven chakra
colours, so tier identity is legible at a glance rather than
spelled out in prose everywhere.

Wiring: functions.php adds vf-tier--t1 through vf-tier--t7 to the
body when a BuddyBoss member type is present. Member types do not
exist on this site yet, so nothing renders until they are created.
The slugs it looks for are t1 through t7, matching the Authentik
tier_membership vocabulary rather than the chakra names, because
the claim is what will eventually drive this.
--------------------------------------------------------------*/

.vf-tier--t1 { --vf-tier: var(--vf-t1); }
.vf-tier--t2 { --vf-tier: var(--vf-t2); }
.vf-tier--t3 { --vf-tier: var(--vf-t3); }
.vf-tier--t4 { --vf-tier: var(--vf-t4); }
.vf-tier--t5 { --vf-tier: var(--vf-t5); }
.vf-tier--t6 { --vf-tier: var(--vf-t6); }
.vf-tier--t7 { --vf-tier: var(--vf-t7); }

/* Tier chip, for member cards and profile headers */
.vf-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0.75em;
  border: 1px solid var(--vf-tier, var(--vf-border));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vf-tier, var(--vf-text-muted));
  background: transparent;
}

.vf-tier-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vf-tier, var(--vf-text-muted));
}

/* Full spectrum rail. Use as a section divider or a cover-image
   fallback. Ordered root to crown, which is the direction the tier
   ladder actually runs. */
.vf-chakra-rail {
  height: 3px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    var(--vf-t1) 0%,
    var(--vf-t2) 16.6%,
    var(--vf-t3) 33.3%,
    var(--vf-t4) 50%,
    var(--vf-t5) 66.6%,
    var(--vf-t6) 83.3%,
    var(--vf-t7) 100%
  );
}

/*--------------------------------------------------------------
7. Component polish
--------------------------------------------------------------*/

/* Cards read as raised planes, not outlined boxes. One hairline
   plus a soft shadow, no double borders. */
.bb-card,
.activity-list .activity-item,
.bs-item-wrap {
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-block);
  background: var(--vf-surface-raised);
}

/* Links inherit the accent without underlining until hovered. */
a {
  color: var(--vf-spirit-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  color: var(--vf-shakti-pink);
}

/* Avatars get a hairline so they hold their edge against dark cards. */
.avatar {
  box-shadow: 0 0 0 1px var(--vf-border);
}

/*--------------------------------------------------------------
8. Accessibility floor
--------------------------------------------------------------*/

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vf-spirit-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}