/* ═══════════════════════════════════════════
   BJF — Design Tokens & Variables
   ═══════════════════════════════════════════ */

:root {

  /* ══════════════════════════════════════════
     Brand Palette — drawn directly from BJF logo
     The logo uses overlapping semi-transparent
     polygon facets in these core hues:

     Dominant:  Deep plum-magenta  #7A2660
     Mid:       Rich violet        #6B3190
     Accent:    Vivid cerise       #B83870
     Facet 1:   Soft lavender      #C4A8D8
     Facet 2:   Dusty rose         #CC8AAA
     Facet 3:   Periwinkle blue    #8EA0C4
     Shadow:    Deep indigo        #3E1850
  ══════════════════════════════════════════ */

  /* ── Core logo hues ── */
  --bjf-indigo:         #3E1850;   /* deepest shadow — bottom of B */
  --bjf-violet:         #6B3190;   /* rich mid-purple              */
  --bjf-plum:           #7A2660;   /* dominant plum-magenta        */
  --bjf-cerise:         #B83870;   /* vivid pink accent            */
  --bjf-lavender:       #C4A8D8;   /* pale purple facet            */
  --bjf-rose:           #CC8AAA;   /* dusty rose facet             */
  --bjf-periwinkle:     #8EA0C4;   /* blue-purple facet            */

  /* ── Semantic aliases (used in CSS) ── */
  --bjf-purple-deep:    var(--bjf-indigo);
  --bjf-purple:         var(--bjf-violet);
  --bjf-purple-mid:     #8B4DB0;
  --bjf-purple-soft:    var(--bjf-lavender);
  --bjf-purple-tint:    #EDE4F5;
  --bjf-purple-pale:    #F6F0FB;
  --bjf-pink:           var(--bjf-cerise);
  --bjf-pink-soft:      var(--bjf-rose);

  /* ── Layered gradient stops (logo-inspired) ── */
  /* Used to recreate the faceted, overlapping depth of the logo */
  --bjf-grad-a:   #3E1850;   /* deep indigo base              */
  --bjf-grad-b:   #6B3190;   /* violet mid                    */
  --bjf-grad-c:   #7A2660;   /* plum                          */
  --bjf-grad-d:   #B83870;   /* cerise highlight              */
  --bjf-grad-e:   #8EA0C4;   /* periwinkle cool facet         */

  /* ── Neutrals ── */
  --bjf-white:          #FFFFFF;
  --bjf-cream:          #FAF7FC;
  --bjf-warm:           #F2EAF6;
  --bjf-text:           #1A0F22;
  --bjf-text-secondary: #46334F;
  --bjf-text-muted:     #7A6488;
  --bjf-border:         rgba(107, 49, 144, 0.13);
  --bjf-border-strong:  rgba(107, 49, 144, 0.28);

  /* ── Semantic ── */
  --bjf-success:        #1D6B4A;
  --bjf-warning:        #8A5C00;
  --bjf-danger:         #9B1C1C;
  --bjf-danger-rgb:     155, 28, 28;
  --bjf-focus:          #6B3190;

  /* ── Typography ── */
  --font-heading:       'Mulish', 'Segoe UI', system-ui, sans-serif;
  --font-body:          'Work Sans', 'Helvetica Neue', system-ui, sans-serif;

  /* ── Type Scale ── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.0625rem;  /* 17px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2rem;       /* 32px */
  --text-4xl:   2.5rem;     /* 40px */
  --text-5xl:   3rem;       /* 48px */

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Layout ── */
  --max-width:       1120px;
  --max-width-text:  660px;
  --max-width-narrow: 520px;
  --nav-height:      72px;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(62, 24, 80, 0.08), 0 1px 2px rgba(62, 24, 80, 0.04);
  --shadow-md:  0 4px 16px rgba(62, 24, 80, 0.12);
  --shadow-lg:  0 12px 40px rgba(62, 24, 80, 0.16);
  --shadow-xl:  0 24px 64px rgba(62, 24, 80, 0.22);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.35s ease;

  /* ── Focus ring ── */
  --focus-ring:  0 0 0 3px rgba(107, 49, 144, 0.38);
}

/* High contrast / reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}