/* ==========================================================================
   The Spiritual Bestie — Brand Token Layer (single source of truth)
   --------------------------------------------------------------------------
   Raw brand primitives + shared semantic tones. Loaded BEFORE site.css
   (frontend) and admin.css (admin) so every theme maps its own tokens onto
   these values.

   Brand palette:
     Midnight Plum    #21172B  — dark surfaces, chrome, headings, ink base
     Cream            #F8F2EA  — page grounds, forms, content surfaces
     Dusty Rose       #C99BA5  — cards, soft accents, selected states
     Soft Lavender    #B9A9D6  — highlights, gradients, spiritual sections
     Champagne Gold   #D8B878  — borders, icons/stars, premium detailing

   Target balance: ~35% plum / 30% cream / 15% rose / 10% lavender / 10% gold.
   Text-safe derivatives are provided because raw rose/gold/lavender fail
   WCAG contrast as text on cream.
   ========================================================================== */

:root {
  /* ---- raw brand ---- */
  --tsb-plum:        #21172B;
  --tsb-plum-soft:   #2A1D36;   /* raised dark surface */
  --tsb-plum-deep:   #150D1C;   /* darkest scrim/ground */
  --tsb-plum-mid:    #352647;   /* strongest dark surface */
  --tsb-plum-button: #3A2848;   /* dark-button/CTA gradient highlight (navbar/hero/draw buttons) */
  --tsb-plum-card:   #2E2038;   /* tarot-card-face gradient highlight */
  --tsb-plum-light:  #4A3558;   /* lightest plum gradient stop — avatars, portrait panels */

  --tsb-cream:       #F8F2EA;
  --tsb-cream-deep:  #F1EBE1;
  --tsb-cream-card:  #FCF7F0;

  --tsb-rose:        #C99BA5;
  --tsb-rose-deep:   #8F5A66;   /* rose usable as text on cream (4.9:1+) */

  --tsb-lavender:    #B9A9D6;
  --tsb-lavender-deep:#6F5D93;  /* lavender usable as text on cream (5.1:1) */

  --tsb-gold:        #D8B878;
  --tsb-gold-soft:   #E8CF9A;
  --tsb-gold-deep:   #7E6039;   /* gold/bronze usable as text on cream */
  --tsb-gold-dim:    #75552E;   /* small meta text bronze */

  /* ---- shared cream/ink derivatives (frontend + admin both need these) ---- */
  --tsb-cream-arcane: #F3EADC;  /* strongest cream surface — cards raised above page ground */
  --tsb-ink-mist:     #5D5261;  /* secondary ink on cream — captions, meta, placeholders */

  /* ---- dark-panel derivatives (text/detail readable on Plum chrome:
     navbar, footer, modals-on-dark, admin sidebar/topbar) ---- */
  --tsb-lavender-pale:  #D9CCDF;  /* lavender lightened — secondary text on plum */
  --tsb-gold-dim-dark:  #C9AD79;  /* gold dimmed for plum backgrounds (mirrors --tsb-gold-dim's role on cream) */

  /* ---- functional status tones (harmonised with palette) ---- */
  --tsb-danger:      #A13A44;
  --tsb-danger-soft: #E8B7BD;
  --tsb-success:     #2E6B4F;
  --tsb-warning:     #7E5A1E;
  --tsb-info:        #56456E;

  /* ---- shared effects ---- */
  --tsb-ring:        0 0 0 .25rem rgba(216, 184, 120, .30);
  --tsb-border-ink:  rgba(33, 23, 43, .16);
  --tsb-border-gold: rgba(216, 184, 120, .28);

  /* ---- semantic roles ----
     A stable vocabulary for new components (any page/section built or
     rebuilt going forward) to reach for, instead of picking raw --tsb-*
     values ad hoc. Existing site.css/admin.css keep their own established
     --void/--midnight/--arcane/--stardust semantic layers (already mapped
     onto these same five colours) — this layer doesn't replace those, it
     gives new work one obvious, documented place to start. */
  --tsb-bg:             var(--tsb-cream);
  --tsb-surface:        var(--tsb-cream-card);
  --tsb-surface-soft:   var(--tsb-cream-deep);
  --tsb-surface-rose:   rgba(201,155,165,.14);   /* soft rose card surface */
  --tsb-surface-lavender: rgba(185,169,214,.16); /* soft lavender card surface */

  --tsb-text:           var(--tsb-plum);
  --tsb-text-muted:     var(--tsb-ink-mist);
  --tsb-text-inverse:   var(--tsb-cream);

  --tsb-border:         var(--tsb-border-ink);
  --tsb-border-premium: var(--tsb-gold);

  --tsb-primary:        var(--tsb-plum);
  --tsb-secondary:      var(--tsb-rose-deep);   /* text-safe rose */
  --tsb-highlight:      var(--tsb-lavender-deep); /* text-safe lavender */

  /* ---- radius scale — premium-rounded, not playful ---- */
  --tsb-radius-btn:    10px;
  --tsb-radius-card:   16px;
  --tsb-radius-modal:  20px;
}

/* Universal baseline: selection + focus visibility for both themes. */
::selection { background: rgba(185, 169, 214, .35); color: #21172B; }

:focus-visible {
  outline: 2px solid var(--tsb-gold);
  outline-offset: 2px;
}