/* SyncLingo design tokens. Shared with the app; fonts loaded in fonts.css. */
:root {
  /* ---- palette (dark, single theme) ---- */
  --sl-ink:        #0A0D0F;   /* page background            */
  --sl-surface:    #12161A;   /* raised panels              */
  --sl-surface-2:  #0E1215;   /* inset / nested surfaces    */
  --sl-line:       #232A30;   /* hairlines, borders         */
  --sl-text:       #E7EDEF;   /* primary text               */
  --sl-muted:      #8794A0;   /* secondary text             */

  /* two accents = two directions (semantic, not decorative) */
  --sl-signal:     #2AE5A0;   /* incoming — decode their speech   */
  --sl-relay:      #FF8A5B;   /* outgoing — broadcast your voice  */
  --sl-signal-ink: #04120C;   /* text on a signal-filled surface  */
  --sl-relay-ink:  #1A0A03;   /* text on a relay-filled surface   */
  --sl-signal-rgb: 42,229,160;
  --sl-relay-rgb:  255,138,91;
  --sl-signal-glow: rgba(42,229,160,.12);
  --sl-relay-glow:  rgba(255,138,91,.10);

  /* ---- type ---- */
  --sl-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sl-font-body:    'Switzer', system-ui, sans-serif;
  --sl-font-mono:    'Martian Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* ---- spacing scale ---- */
  --sl-space-1: .25rem;
  --sl-space-2: .5rem;
  --sl-space-3: .75rem;
  --sl-space-4: 1rem;
  --sl-space-5: 1.5rem;
  --sl-space-6: 2rem;
  --sl-space-7: 3rem;
  --sl-space-8: 4.5rem;

  /* ---- radii ---- */
  --sl-radius:      14px;
  --sl-radius-lg:   18px;
  --sl-radius-pill: 999px;

  /* ---- elevation ---- */
  --sl-shadow-panel: 0 34px 66px -34px rgba(0,0,0,.85);
  --sl-shadow-glow:  0 22px 54px -32px var(--sl-signal);

  /* ---- motion ---- */
  --sl-ease:     cubic-bezier(.2,.7,.2,1);
  --sl-dur-fast: .18s;
  --sl-dur:      .3s;
}