/* ============================================================
   GigFrame — Design Tokens  (v2.1, Session-0 audit applied)
   Dark-first. Stage is the darkest surface. Violet = state/fill only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Seed ---- */
  --brand-violet:        #7C3AED;
  --brand-violet-deep:   #6B21A8;

  /* ---- Dark scheme (DEFAULT) ---- */
  --primary:             #D4BBFF;
  --on-primary:          #38006B;
  --primary-container:   #5500A6;
  --on-primary-container:#EDDCFF;

  --secondary:           #CCC2DC;
  --on-secondary:        #332D41;
  --secondary-container: #4A4458;
  --on-secondary-container:#E8DEF8;

  --tertiary:            #EFB8C8;
  --on-tertiary:         #492532;
  --tertiary-container:  #633B48;
  --on-tertiary-container:#FFD8E4;

  --error:               #FFB4AB;
  --on-error:            #690005;
  --error-container:     #93000A;
  --on-error-container:  #FFDAD6;

  --background:          #1C1B1F;
  --on-background:       #E6E1E5;

  --surface:             #1E1B2E;
  --on-surface:          #E6E1E5;
  --surface-variant:     #49454F;
  --on-surface-variant:  #CAC4D0;

  --sc-lowest:           #0F0D13;
  --sc-low:              #1D1B20;
  --sc:                  #211F26;
  --sc-high:             #2B2930;
  --sc-highest:          #36343B;

  --outline:             #938F99;
  --outline-variant:     #49454F;
  --scrim:               #000000;

  /* ---- GigFrame custom semantic ---- */
  --stage-bg:            #0F0D13;
  --stage-surface:       #161320;
  --stage-surface-raised:#1E1B2E;

  --accent-violet:       #7C3AED;  /* FILL ONLY */
  --accent-violet-bright:#A855F7;  /* min for small text */
  --accent-violet-dim:   #5B21B6;

  --setlist-active:      #D4BBFF;
  --setlist-inactive:    #49454F;
  --setlist-cue:         #EFB8C8;

  --waveform-fill:       #7C3AED;
  --waveform-playhead:   #D4BBFF;
  --waveform-loop:       #EFB8C880;

  --sync-locked:         #4CAF50;
  --sync-pending:        #FF9800;
  --sync-error:          #FFB4AB;

  --obs-bg:              #14121C;
  --obs-border:          #2D2A3E;
  --obs-text:            #CAC4D0;

  /* ---- Spacing — 4dp grid ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10:40px;
  --s-12:48px; --s-16:64px; --s-20:80px;

  /* ---- Radius ---- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  28px;
  --r-full:999px;

  /* ---- Elevation (dark surfaces) ---- */
  --elev-1: 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02);
  --elev-2: 0 4px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03);
  --elev-3: 0 14px 40px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);

  /* ---- Type families ---- */
  --font-display: 'Syne', system-ui, sans-serif;     /* display, titles, stage lyrics */
  --font-mono:    'DM Mono', ui-monospace, monospace; /* UI, body, ALL numerics */

  /* ---- Motion ---- */
  --beat-bpm: 810ms;   /* one beat at ~74 BPM */
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

/* Light fallback — Studio desktop / docs. Scope via .theme-light */
.theme-light {
  --primary:            #6B21A8;
  --on-primary:         #FFFFFF;
  --primary-container:  #EDDCFF;
  --on-primary-container:#22005D;
  --secondary:          #625B71;
  --on-secondary:       #FFFFFF;
  --secondary-container:#E8DEF8;
  --on-secondary-container:#1D1A2C;
  --tertiary:           #7E5260;
  --on-tertiary:        #FFFFFF;
  --tertiary-container: #FFD8E4;
  --on-tertiary-container:#31111D;
  --background:         #FFFBFE;
  --on-background:      #1C1B1F;
  --surface:            #FFFBFE;
  --on-surface:         #1C1B1F;
  --surface-variant:    #E7E0EB;
  --on-surface-variant: #49454F;
  --outline:            #7A757F;
  --sc-lowest:          #FFFFFF;
  --sc-low:             #F7F2FA;
  --sc:                 #F2ECF4;
  --sc-high:            #ECE6EE;
  --sc-highest:         #E6E0E9;
  --accent-violet-bright:#6B21A8;
}