/**
 * mixosmosis — design tokens extracted from the live Elementor kit + site content.
 * Colour values are real (by usage frequency in the DB). Font ROLE assignments are
 * best-guess from the loaded families + child CSS — confirm exact usage in the Local
 * reference (Phase 2) before locking typography.
 */
:root {
  /* Core surfaces */
  --c-bg:            #0c0c0c;   /* dark theme background (near-black) */
  --c-bg-black:      #000000;
  --c-surface:       #121214;   /* kit "Saved Color #3" — panels */
  --c-white:         #ffffff;

  /* Brand accents */
  --c-primary:       #00ad8e;   /* teal — primary accent (203 uses) */
  --c-action:        #50e69b;   /* mint green — A/B play button + CTAs (127 uses) */
  --c-purple:        #544d67;   /* dark purple secondary (176 uses) */
  --c-purple-muted:  #716d93;   /* kit "Saved Color #4" */
  --c-brown:         #82594e;   /* warm accent (kit "Saved Color #1") */
  --c-blue-grey:     #abb2c4;   /* kit "Saved Color #2" */

  /* Grey ramp */
  --c-grey-100:      #e5e5e5;
  --c-grey-200:      #d7d7d7;
  --c-grey-300:      #b9b9b9;
  --c-grey-400:      #919191;   /* form/label text (from child CSS) */
  --c-grey-500:      #818181;

  /* Typography — confirm roles live */
  --font-display:    'Montserrat', system-ui, sans-serif;      /* headings */
  --font-condensed:  'Barlow Condensed', system-ui, sans-serif;
  --font-body:       'Josefin Sans', system-ui, sans-serif;    /* candidate body */
  --font-slab:       'Arvo', Georgia, serif;
  --font-mono:       'Roboto Mono', ui-monospace, monospace;
}

/* Minimal A/B player styling ported from the old child theme */
.audio-btn-sync-play {
  background-color: var(--c-action);
  border-color: var(--c-action);
}
.audio-btn-sync-play h4 { text-align: left; }
.audio-sync-group { display: flex; flex-direction: row; justify-content: center; }
.audio-btn-sync-play, .audio-btn-sync-a, .audio-btn-sync-b { flex: 1; }
.audio-sync-group, .audio-sync-right, .audio-sync-wrapper { width: 100%; }
.audio-sync-buffering-label {
  z-index: 9999; position: absolute; width: 100%; height: 100%;
  margin-top: 0; background-color: var(--c-bg-black);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}