/* SOVCOM V3 Design Tokens */
:root {
  /* Spacing */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px;
  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 9999px;
  /* Font sizes */
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 28px;
  /* Timing */
  --t-fast: 120ms; --t-mid: 250ms; --t-slow: 400ms;
  /* Z-index layers */
  --z-modal: 100; --z-toast: 200; --z-call: 300;
}

[data-theme="dark"], :root {
  --bg0:      #0d0d12;
  --bg1:      #16161e;
  --bg2:      #1e1e28;
  --bg3:      #26263a;
  --bg4:      #303048;
  --surface:  #1e1e28;
  --border:   rgba(255,255,255,0.08);
  --text0:    #f0f0ff;
  --text1:    #c0c0d8;
  --text2:    #7878a0;
  --text3:    #505070;
  --accent:   #5b8af0;
  --accent2:  #7060e0;
  --teal:     #2dd4bf;
  --green:    #22c55e;
  --danger:   #ef4444;
  --warning:  #f59e0b;
  --sent-bg:  #1e3a6e;
  --recv-bg:  #1e1e28;
  --shadow:   0 4px 24px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg0:      #f5f5f8;
  --bg1:      #ffffff;
  --bg2:      #f0f0f5;
  --bg3:      #e4e4ec;
  --bg4:      #d8d8e8;
  --surface:  #ffffff;
  --border:   rgba(0,0,0,0.08);
  --text0:    #111118;
  --text1:    #333348;
  --text2:    #666680;
  --text3:    #9090a8;
  --accent:   #3b6fd4;
  --accent2:  #5040c8;
  --teal:     #0d9488;
  --green:    #16a34a;
  --danger:   #dc2626;
  --warning:  #d97706;
  --sent-bg:  #dbeafe;
  --recv-bg:  #f0f0f5;
  --shadow:   0 4px 24px rgba(0,0,0,0.12);
}